cursor not stopping until button click completes in window.onbeforeunload?

Question

I have below javascript code for window.onbeforeunload. I am calling code behind button click method when pressed browser back button.

Now the problem is cursor is not stopping until $("#buttonclientid").click() completes. Just calling the method and moving to next statement. How to hold or stop cursor until $("#buttonclientid").click() complete and then move to next step?

var form_has_been_modified = 0;
  $(function () {

      $("input").keyup(function () {
          form_has_been_modified = 1;
      })
      window.onbeforeunload = function (e) {
          if (!form_has_been_modified) {
                  return;
          }
                doYouWantTo();
      }

   });

   function doYouWantTo(){
        doIt=confirm('Do you want to save the data before leave the page?');
        if (doIt) {
             var returnbutton;
             //cursor should stop here until click function completes.
             returnbutton = $("#buttonclientid").click();
        }
        else{

            }
        }

What do you mean about the cursor "not stopping"? What cursor? Where is it going? Why is it moving? — Pointy, Sep 05 '12 at 15:12
I mean to say after clicking on "BACK" button on browser and it is executing next step without completing $("#buttonclientid").click(); function and going back page. — James123, Sep 05 '12 at 15:14

score 1 · Answer 1 · answered Sep 05 '12 at 15:13

1

I believe your problem lies in the fact that your doYouWantTo function does not return a value to be passed back into onbeforeunload so it is leaving the page while also running the function, rather than waiting until it completes.

Your best action here would be something like:

return doYouWantTo()
....
if(doIt) {
    $('#buttonclientid').click(function() { // unsure if you can attach callback to click but idea is same
        return true;
    });
} else {
    return true;
}

answered Sep 05 '12 at 15:13

SlashmanX

2,489
18
16

what you mean "attach callback ". Can you please elaborate? – James123 Sep 05 '12 at 15:19
1

I mean a callback to indicate that your 'save' function has completed. I don't believe you can utilize callbacks on click events so maybe take your `click` code out and place it in a separate function `saveData(callback)` and in the `if(doIt)` branch replace `$('#buttonclientid').click(` with `saveData(` – SlashmanX Sep 05 '12 at 15:31

score 0 · Answer 2 · edited May 23 '17 at 12:27

When binding an event handler to the onbeforeunload event, it should return one of two things:

if you want a confirm to show, your handler should return a string
if you don't want a confirm to show (skip the handler), return undefined (or don't return at all, same effect)

That being said, your code should look something like this:

var form_has_been_modified = false;
$("input").keyup(function () {
    form_has_been_modified = true; // use a boolean :P
});

window.onbeforeunload = function (e) {
    if (form_has_been_modified) {
        return 'Do you want to save the data before leave the page?';
    } else {
        return undefined; // this can be omitted if you prefer
    }
};

The only way to tell what a user clicked on the system dialog is to use setTimeout. See this question for details on that subject.

cursor not stopping until button click completes in window.onbeforeunload?

2 Answers2