Using JS to pause a redirect & using JS to refresh a page after an action button is clicked

Chem · June 17, 2020, 2:15am

Scenario 2: A very similar approach can be done for action links but requires a bit more code as changing the page in the pagination, adding a record to the table, or refreshing the records on the table will require you to run the JavaScript again.

This time you’ll need to add a class to the column that contains the action links as shown in the image below.

Next, add the following to the JavaScript of the page that contains the action links.

var setOnClickEventsForActionLinks = function(){
    $('tbody tr').find('.my-action-link a').click(function(){
        $('body').append('<div class="loader"><p>The contract is being generated, please wait...</p></div>');
        setTimeout(function(){
            location.reload();
        },10000);
    });
};
TB.render('component_ID', function(data) {
    setOnClickEventsForActionLinks();
    $('body').click(function(){
        setTimeout(function(){
            $('tbody tr').find('.my-action-link a').off();
            setOnClickEventsForActionLinks();    
        },800);
    });
});

Again, make sure to update “component_ID” to the actual id of your table.

Then add the following to the CSS of the page.

.loader{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../../../images/spinner-light.gif') 
              50% 50% no-repeat rgb(249,249,249);
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader p{
    margin-top: 200px;
}

And here’s what the end result should look like!