1

I am trying to use AJAX in the window.onbeforeunload function to autosave a text field that is on a page in my site (there is no save button, it is all done in the background). The saving function is written in PHP. I started by trying the following:

window.onbeforeunload = function(e){
  var noteelement = document.getElementById( 'note' );
  var mynote = noteelement.value;

  $.post('save_my_note.php', { thenote: mynote }, function(data){});
  };

In researching, I have come to understand that due to the asynchronous nature of the ajax call, the php code is not called because the window closes before the function fires off from the server.

Of course, as others have said, if I add a return value to onbeforeunload function to cause the dialog box to pop up (that would be the "are you sure you want to leave" box), it DOES work since the .post call has the time to get run while the dialog box waits for a response:

  $.post('save_my_note.php', { thenote: mynote }, function(data){});
  return mynote;
  };

It has been said that I have to change this post call to asynchronous AJAX so that the function waits for the function to complete, but not being very versed in the syntax, I am not quite sure of the syntax I need. I tried the following in place of the post function:

        $.ajax({
            url: "save_my_note.php",
            data: "{thenote: mynote}",
            async: false                 
        });

However, that just doesn't seem to work either.

Does anyone have a simple code example for implementing the autosave in a synchronous manner via the onbeforeunload (or the onunload??) function? I'm not a javascript or jquery expert, and the examples I have found online have been confusing.

Ben Cahan
  • 63
  • 2
  • 7
  • Did you mean to type `async: false` in your last code snippet? – Ivan Jan 03 '12 at 21:47
  • 1
    See this question for an answer: http://stackoverflow.com/questions/2970782/javascript-wait-until-ajax-request-finishes-to-close-page – Ivan Jan 03 '12 at 21:49
  • Be aware that onbeforeunload doesn't fire in mobile browsers, so you might have to handle things differently there if you are catering for the mobile market too – Ian Stanway Jul 10 '12 at 09:51

2 Answers2

2

Your last example should work, you need to change asynch: false to async: false (the extra h must be removed) according to jQuery documentation

Community
  • 1
  • 1
Tony
  • 1,811
  • 1
  • 20
  • 27
0

Maybe you could force a timeout pause - dunno if this'll actually work, just a guess:

var bSaved = false;
window.onbeforeunload = function(e){
  bSaved = false;
  var noteelement = document.getElementById( 'note' );
  var mynote = noteelement.value;

  $.post('save_my_note.php', { thenote: mynote }, function(data){ bSaved = true; });

  window.setTimeout('bSaved = true',2000);

  while (!bSaved) {}

  };
Matt H
  • 6,422
  • 2
  • 28
  • 32
  • I've read that changing it to ajax and using the async: true should cause the server side code to pause and wait for it to be done before moving on, but I can't get it to work. A timeout is likely haphazard at best and would add a mandatory waiting time anyhow to all my pages before they close. – Ben Cahan Jan 03 '12 at 21:53
  • That's not a mandatory time I put in, rather it is a maximum timeout. The page would unload as soon as the server returned, or in two seconds, whichever comes first. – Matt H Jan 03 '12 at 21:57
  • 1
    @MattH the timeout (and success callback) will never be fired because it will get stuck inside the while loop forever. – Paul Feb 11 '13 at 21:25