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

[tim.young]

Hi there, I’ve built 2 scenarios for my app with Integromat.

Scenario 1: Generate contracts from a form submission
What I’m looking for: After the form is submitted, the user is redirected to a details page. The Integromat scenario takes 10-ish seconds to complete after submission before a download link is added to the record for the user to see. How can I use JS to pause the redirect, or better yet have my app display a message “The contract is being generated, please wait”, possibly show another message upon completion, and then continue with the redirect.

Scenario 2: Refresh page after action link is clicked
What I’m looking for: Similar to Scenario 1, I have action links on my details page to regenerate a contract, and another one for generating another document (again with Integromat). Basically the same question applies, How can I use JS to force a refresh after X amount of seconds, or better yet have my app display a message “The document is being generated, please wait”, possibly show another message upon completion, and then continue with the refresh.

Any help would be seriously appreciated.

[Chem]

Hey Tim!

Scenario 1: The first thing you’ll need to do is to find the id of the form you want to delay so we can target that form’s submit button and only that form’s submit button.

To find the form’s id, hover over the info icon in the Page Builder

Once you’ve found that, you can add the following JavaScript to the JavaScript tab on the parent page (the page that contains the form) (not the details page)

TB.render('component_ID', function(data) {
    data.ele.find('.form-submit button').click(function(){
        $('body').append('<div class="loader"><p>The contract is being generated, please wait2...</p></div>');
        setTimeout(function(){
             location.reload();
        },10000);
    });
});

Please make sure you change “component_ID” to the id of your form.

Lastly, on the details page, add the following to the CSS tab.

.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 that’s all! Here’s how the end result should look.

[Chem]

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!

[tim.young]

Damn Chem, you are a wizard!

Thank you so much for the detailed responses. I will give these an in-depth look and test tomorrow.

[tim.young]

@Chem

var setOnClickEventsForActionLinks = function(){
    $('tbody tr').find('td:nth-last-child(2) a').click(function(){
        $('body').append('<div class="loader"><p>The contract is being generated, please wait...</p></div>');
        setTimeout(function(){
            location.reload();
        },10000);
    });
};
var actionLinkTableHasLoaded = false;
function checkIfActionLinkTableHasLoaded() {
    if(actionLinkTableHasLoaded === false) {
        if ($('#CHANGE_ME_TO_THE_TABLE_ID tbody tr').html() !== undefined) {
            actionLinkTableHasLoaded = true;
        }
       window.setTimeout(checkIfActionLinkTableHasLoaded, 100);
    } else {
        setOnClickEventsForActionLinks();
        $('body').click(function(){
            setTimeout(function(){
                $('tbody tr').find('td:nth-last-child(2) a').off();
                setOnClickEventsForActionLinks();    
            },800);
        });
    }
}
checkIfActionLinkTableHasLoaded();

Hey sorry I never got back to you. I used the first solution you posted and that worked great. I’m working on adding the second solution, but I just wanted to run this by you. The action link I’m using is in a details component. Is that going to make a difference?

[Chem]

Hey Tim, please try the following

TB.render('component_ID', function(data) {
    data.ele.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);
    });
});

[tim.young]

@Chem

#field_block_

This is what I replace with the element ID, right?

[tim.young]

@Chem After inspecting the page in question, I can see where #field_block_ comes from and that there’s no identifier to distinguish between action links. In my case, I have multiple action link buttons to generate various documents so I don’t think this will work for me.

Edit: Sorry, I’m thinking out loud here - I CAN use this JS snippet because it will run no matter which button is clicked right? I’ll try and post back for anyone who may come across this post.

Edit 2: IT WORKS

Edit 3: More thought vomit - the downside to the JS targeting any action link in a details component is that I have to set the timeout to cater to the document that takes the longest to generate, rather than setting timeout specifically per document.

[SafetyUniversity]

@Chem

With the new(er) JS API built out. Would you be willing to update Scenario 1 with the TB-type script?

~Adam

[Chem]

UPDATE: All Code and Screenshots updated to match current JS API and CSS Class options now available for Table Columns and Detail Component Fields.

[centellix]

The problem is this takes up the entire screen and would block input on additional action links that may also need to be run until the loading wheel completes. We need to have a status indicator to replace an action link until it completes, so a person knows that there are rules being processed in the background.

[centellix]

We really need a way to avoid the entire screen from showing an updating GIF and allow the action link button or text itself to be replaced with a loading icon. This way, a user can continue to work on the page while an action link is processing.

Unless I am mistaken, your script will force a user to wait until the loading disappears to proceed to the next action link. Any way to replace an action link button with something else while its loading? Any alternatives you or anyone else can think of? Currently, the only thing that happens when you click an action link button is that the color dims but otherwise no useful feedback and it appears to be frozen.

This is a very poor user experience.