Question

I have a button which acts as an indicator, so has two states; pressing it toggles the state, and moves on to the next page.

Pressing the button calls a JavaScript function which handles this.

Having changed a button’s ‘src’ image, using jQuery, I wish for the user to see the image change, pause for a fraction of a second, and only then see the next page displayed.

I am finding that the image does not visibly change until the JavaScript function returns, but this is after the pause, and after the page change. I.e. the browser does not show the page changes until the button’s function has exit.

So I wish to cause the page to repaint in the browser, before the pause.
All the solutions I have tried refresh the page to its state on the server, and any changes I made to it in jQuery are lost.

Is there a way to force the page or button to be repainted, which will honor the changes I made to it in JavaScript/jQuery?

Answer 1

$("#YourButtonWhichTriggersChanges").click(function() {
    // page repaint code, image change, etc.

    setTimeout(function(){
        window.location.reload();
        // use window.location.href = "my/new/url.html";
        // or window.location.replace("my/new/url.html");  
        // to change the page instead of just reloading.
    }, 1000);
});

Where 1000 is the number of milliseconds you want to wait before refreshing the page.

---

Edit: I think you want this code instead:

$("#ApproveButton").css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');

The extra backslashes are in there to escape out the single quotes in the url parameter.

---

Another edit: Here’s a combination of the two solutions I supplied which should work:

$("#ApproveButton").click(function() {
        // actually repaint the button's background image
        $(this).css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');

        // change the page after 1000 milliseconds have gone by.
        setTimeout(function(){
            window.location.reload();
            /* use window.location.href = "my/new/url.html";
             * or window.location.replace("my/new/url.html");  
             * to change the page instead of just reloading.
             */
        }, 1000);
    });