Show loading GIF while Action Links run

[Chem]

Hey Tadabase Community!

So you want Action Links to show a loading indicator while running? I’ve got a JavaScript and CSS solution for you until we implement this as a native feature.

Here’s how the result will look.

Step 1: Add a CSS class to the Action Links column called “myAction”

Step 2: Add the following CSS to the page

.td-link.disabled {
    display: none !important;
}

Step 3: Find the Component ID for your table

Step 4: Add the following JavaScript to the page but change “component_ID” to your tables ID in Step 3

TB.render('component_ID', function (data) {
    setTimeout(function () {
        $('.myAction .td-link').each(function (index) {
            new MutationObserver(function (mutations, observer) {
                mutations.forEach(function (mutation) {
                    if ($(mutation.target).hasClass('disabled')) {
                        $(mutation.target).parent().append('<div class="action-link-loader"><span>Loading... </span><img src="../../../images/spinner-light.gif" width="12px"></div>');
                    } else {
                        $(mutation.target).parent().find('.action-link-loader').remove();
                    }
                });
            }).observe(this, {
                attributes: true,
                attributeFilter: ['class']
            });
        });
    }, 25);
});

[centellix]

@Chem

myAction

Thanks so much! Is there any way you can have this work when using a button on an action link instead of text?

I tried and it does work when the action link is text, but it doesn’t do anything when the action link is a button. I would love to have it work for that to.

[centellix]

Also, It would be great if we could combine the action-link-refresh into this so it would also be able to refresh the other table automatically. I currently have action-link-refresh as the css and I have to replace it with myAction, which means now I don’t have the ability to have the loading indicator and the ability to automatically refresh the table thats being updated by the action link.

This would be to combine the loading gif and the auto refresh Auto-refresh for datatable

[mdykstra]

It would be amazing to show the loading gif every time something is clicked or loading.

[centellix]

@Chem How can I combine the use of the loading… AND auto table refresh? Is there a way?

[centellix]

@Chem This does not work when using buttons. Only links. Any way to get this loading text to appear when using a button for an action link?

[centellix]

@Chem Chem, would love to get a response on this. I need to be able to have the loading indicator AND refresh a connected table

[Chem]

@centellix

This should work with buttons

TB.render('component_ID', function (data) {
    setTimeout(function () {
        $('.myAction .td-data-link').each(function (index) {
            new MutationObserver(function (mutations, observer) {
                mutations.forEach(function (mutation) {
                    if ($(mutation.target).hasClass('disabled')) {
                        console.log($(mutation.target).parent())
                        $(mutation.target).append('<div class="action-link-loader"><span>Loading... </span><img src="../../../images/spinner-light.gif" width="12px"></div>');
                    } else {
                        $(mutation.target).find('.action-link-loader').remove();
                    }
                });
            }).observe(this, {
                attributes: true,
                attributeFilter: ['class']
            });
        });
    }, 25);
});

[slimpens]

@Chem

I am planning to use this code later this week. Does the JS include both the loading indicator AND refresh the connected table like @centellix mentions ?

[Chem]

Hey @slimpens the JS above will not refresh connected tables but you may certainly add one line of code to do that.

You can programmatically refresh all tables by triggering

 $('.t-refresh-button').click();  

or you can target a specific table by adding a CSS Class to the table, for example “my-table”

and then use the following in JavaScript

$('.my-table .t-refresh-button').click();

[slimpens]

Great, when you have a page with multiple tables (and all with action links), it is possibel that the JS doens’t work since there a 3 JS codes (all the same, except the componentID)?

The full code is now:

TB.render(‘component_25’, function (data) {
setTimeout(function () {
$(‘.myAction .td-link’).each(function (index) {
new MutationObserver(function (mutations, observer) {
mutations.forEach(function (mutation) {
if ($(mutation.target).hasClass(‘disabled’)) {
$(mutation.target).parent().append(‘

Even geduld…

’);
} else {
$(mutation.target).parent().find(‘.action-link-loader’).remove();
}
});
}).observe(this, {
attributes: true,
attributeFilter: [‘class’]
});
});
}, 25);
});
TB.render(‘component_32’, function (data) {
setTimeout(function () {
$(‘.myAction .td-link’).each(function (index) {
new MutationObserver(function (mutations, observer) {
mutations.forEach(function (mutation) {
if ($(mutation.target).hasClass(‘disabled’)) {
$(mutation.target).parent().append(‘

Laden resultaten…

’);
} else {
$(mutation.target).parent().find(‘.action-link-loader’).remove();
}
});
}).observe(this, {
attributes: true,
attributeFilter: [‘class’]
});
});
}, 25);
});
TB.render(‘component_39’, function (data) {
setTimeout(function () {
$(‘.myAction .td-link’).each(function (index) {
new MutationObserver(function (mutations, observer) {
mutations.forEach(function (mutation) {
if ($(mutation.target).hasClass(‘disabled’)) {
$(mutation.target).parent().append(‘

Laden resultaten…

’);
} else {
$(mutation.target).parent().find(‘.action-link-loader’).remove();
}
});
}).observe(this, {
attributes: true,
attributeFilter: [‘class’]
});
});
}, 25);
});

[Chem]

I haven’t tested this out yet, but I think for multiple tables it might work better if you change each

$('.myAction .td-link')

to

data.ele.find('.myAction .td-link')

[slimpens]

@Chem,

Thanks, but isn’t it better to give every CSS Class a different name? Because I need some kind of unique ID and Myaction (from the example) is the same.

[slimpens]

@Chem

$('.myAction .td-link')

@Chem , I checked it but this code doens’t work…Also, the button is located in a List Details section through an Action Link… Could this also be affecting the results?

$('.myAction .td-link')

to

data.ele.find('.myAction .td-link')

[slimpens]

@Chem

So, summarized::

I have a " results" page… with 3 separate list components… Each list component has an Action Link (button) which triggers a Pipe… Since generating the results takes time, I would like to have each Action Link button on each component show a “loading results” text while the Pipe is running…

What’s the best way to do this? The components each have their own ID. Or does the code only work on tables and not on List Components?

[Chem]

Hey @slimpens, this will work with List Components with one minor change to the code.

Change the line of code that is

$(mutation.target).append('<div class="action-link-loader"><span>Loading... </span><img src="../../../images/spinner-light.gif" width="12px"></div>');

to the following

$(mutation.target).parent().append('<div class="action-link-loader"><span>Loading... </span><img src="../../../images/spinner-light.gif" width="12px"></div>');

[slimpens]

@Chem

it works !! Great !