I am using the dirty-forms / are-you-sure js on a test form that confirms if the user does want to navigate away from a page with unsaved changes.

This works as expected, but I am also using a "please wait" image that shows when the user makes a call to the server.

How do I only trigger the "please wait" image ONLY when the user clicks on the "Leave this Page" button on the are-you-sure message pop up box?

Currently I have the please wait image triggered to appear when the user clicks on the cancel button, b/c I cannot think where else to trigger it from.

Here is my < head > code:

<div id="loading-div-background">
    <div id="loading-div" >
        <img  src="{{ STATIC_URL }}img/page-loader.gif" />
    </div>
</div>

Here is my template code:

<a href="{% url certification_details %}" class="btn" onclick="showProgressAnimation();">Cancel</a>

Here is the js code that I have:

<script>
    $('form').areYouSure( {'message':'You have unsaved changes.'} );
</script>

EDIT - added the hide image css as requested.

This is the CSS that hides the please wait icon when the page 1st loads:

#loading-div-background {
    background-color: rgba(246,246,246,0.7);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

I am using the dirty-forms / are-you-sure js on a test form that confirms if the user does want to navigate away from a page with unsaved changes.

This works as expected, but I am also using a "please wait" image that shows when the user makes a call to the server.

How do I only trigger the "please wait" image ONLY when the user clicks on the "Leave this Page" button on the are-you-sure message pop up box?

Currently I have the please wait image triggered to appear when the user clicks on the cancel button, b/c I cannot think where else to trigger it from.

Here is my < head > code:

<div id="loading-div-background">
    <div id="loading-div" >
        <img  src="{{ STATIC_URL }}img/page-loader.gif" />
    </div>
</div>

Here is my template code:

<a href="{% url certification_details %}" class="btn" onclick="showProgressAnimation();">Cancel</a>

Here is the js code that I have:

<script>
    $('form').areYouSure( {'message':'You have unsaved changes.'} );
</script>

EDIT - added the hide image css as requested.

This is the CSS that hides the please wait icon when the page 1st loads:

#loading-div-background {
    background-color: rgba(246,246,246,0.7);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

• javascript
• jquery
• forms
• form-submit

• 1 The existing answer has a working example. If something isn't working with his answer, leave a ment and let him know. Looks good to me. – Chris Baker Commented Nov 29, 2014 at 18:59
• BTW how are you displaying/hiding the image..? Can you provide an online demo if the problem persists..? – T J Commented Nov 29, 2014 at 20:00
• 2 Chris Baker - look again. Load the page. Refresh the page without making changes. – user1261774 Commented Nov 29, 2014 at 21:36

3 Answers 3

You may save the state of your form and maybe the values of your form.

check these two links.

https://stackoverflow./a/10312156/2655623

https://stackoverflow./a/26535253/2655623

You can also get all elements of your form and save it somewhere.

When you want to reset your form, you can reset the state of saved values too.

These are raw ideas, though.

Look at the examples:

   /*
    *  Mixing in your own logic into the warning.
    */
    $('#my-form').areYouSure( {'silent':true} );
    $(window).on('beforeunload', function() {
        isSunday = (0 == (new Date()).getDay());
        if ($('#my-form').hasClass('dirty') && isSunday) {
            return "Because it's Sunday, I'll be nice and let you know you forgot to save!";
        }
    }

If you want to trigger your please wait message on any case (leaving or not) you should probably use something like this:

   /*
    *  Displaying your please wait message
    */
    $('#my-form').areYouSure( {'silent':true} );
    $(window).on('beforeunload', function() {
        $('#pleasewaitmessage').show();
        return "You have unsaved changes.";        
    }

Plunkr here

I don't think that this can be achieved.

Salivan gave the better response.