4

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;
}
user1261774
  • 3,525
  • 10
  • 55
  • 103
  • 1
    The existing answer has a working example. If something isn't working with his answer, leave a comment and let him know. Looks good to me. – Chris Baker Nov 29 '14 at 18:59
  • BTW how are you displaying/hiding the image..? Can you provide an online demo if the problem persists..? – T J Nov 29 '14 at 20:00
  • 2
    Chris Baker - look again. Load the page. Refresh the page without making changes. – user1261774 Nov 29 '14 at 21:36

3 Answers3

5

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

check these two links.

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

https://stackoverflow.com/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.

Community
  • 1
  • 1
Soley
  • 1,716
  • 1
  • 19
  • 33
3

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

geekymartian
  • 645
  • 5
  • 11
  • Thanks for the response, but if the page is reset, and the dirty forms cancel button clicked, the please wait should not appear on the page. This is the error that I currently have. – user1261774 Nov 29 '14 at 21:56
  • "if the page is reset, and the dirty forms cancel button clicked" - this doesn't make sense to me. Could you clarify a little further what you are trying to do / workflow? –  Dec 04 '14 at 22:00
  • yhax, if the page is dirty and the page is reset (or the user attempts to navigate away from the page without saving changes), the leave or stay confirmation will pop up. The please wait icon should only appear / display if the user clicks on the "leave this page" button. Does that make sense? – user1261774 Dec 05 '14 at 05:33
-2

I don't think that this can be achieved.

Salivan gave the better response.

user1261774
  • 3,525
  • 10
  • 55
  • 103