AJAX Disable back button until callback executes

Question

I have a code error popping up when someone hits the back button while an ajax call is loading. Is there a way to disable back until the call returns successfully?

Example:

$.ajax({
// Disable back button
url: "test.html",
context: document.body

}).done(function() {
// Enable back button
$(this).addClass("done");
});

I know it is bad to hijack browser functionality and I noted that but it's not my choice here i am not the project owner. Also it is just temporary for a few seconds while ajax does its thing. I have already searched but haven't come up with anything particularly useful for this scenario.

You mean the "back" button on the browser? No, there is no way to disable it from JavaScript code. The *most* you can do is use `onbeforeunload` to show a "are you sure you want to leave?" confirmation. — gen_Eric, Apr 11 '13 at 18:27
You can't stop them. But you can attempt to - by binding an event to the `window` "beforeunload" event when there's an AJAX request still taking place. Doing so correctly can bring up a popup to the user asking if they really want to leave the page or not (so this isn't specific to clicking the Back button...it's for any way of leaving the page) — Ian, Apr 11 '13 at 18:27

winner_joiner · Answer 1 · 2013-05-08T08:02:55.220

2

You cannot prevent the User from using the backbutton in the WebBrowser, but maybe with this code you could, signal the user the wait.(and maybe the user waits, or so) :)

example:

window.onbeforeunload = function(){
     return "Please wait until page load is done?";
}

=> Code Tested on Chrome 26+

Maybe this helps

Edit:

to counter what "hop" mentioned, you could set this event function, when starting the ajax call and removing the function after ending the ajax call, but this are only some details.

Example 2:

 ...
 function setPreventLeavingPage(){
    window.onbeforeunload = function(){
         return "Please wait until page load is done?";
    }
 }

 function removePreventLeavingPage(){
   window.onbeforeunload = null;
 }
 ...

 $.ajax({
    url: "test.html",
    beforeSend: function() {
      setPreventLeavingPage();
    },
    context: document.body
    }).done(function() {
       // do some stuff
       ...
       removePreventLeavingPage();
    });

=> Code Tested on Chrome 26+

edited May 08 '13 at 08:02

answered Apr 11 '13 at 18:28

winner_joiner

12,173
4
36
61

**This Code pops up a confirm dialog**, were they can choose stay or leave! otherwise, i dont know an better solution – winner_joiner Apr 11 '13 at 18:30
Whoops! I was expecting you to trigger a `confirm()`; I didn't realize `onbeforeunload` does this automatically! Here is the [MDN entry for onbeforeunload](https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload) for future ignoramuses like me. – Evan Davis Apr 11 '13 at 18:31
1

But, this will happen even for the page is navigated by other means, say by the code. But, I am afraid there is no way to detect it – hop Apr 11 '13 at 19:26
@hop Which is probably a safe thing to do since I'm not sure why the OP *only* wants to stop the Back button. Nonetheless, it's important to point out that this happens anytime the page is left, not just going back in browser history. – Ian Apr 12 '13 at 02:14
this update could solve, the mentioned issue... :) – winner_joiner Apr 12 '13 at 10:32
The OP (Me) wants to stop the back button because hitting back during a specific AJAX call we are making is throwing an error. – RAC Apr 16 '13 at 21:33

gen_Eric · Answer 2 · 2013-04-12T13:26:56.137

You cannot disable the back (or any, for that matter) button in the browser. Could you imagine if you could?! Spam popups would have a field day!

Anyway, the best you can do is use onbeforeunload (which only works in some browsers, like I know Opera doesn't support it). If there is an AJAX request, you can throw an "Are you sure you want to leave?" message.

Example:

$(document).ajaxStart(function(){
    $(document.body).addClass('running');
});
$(document).ajaxStop(function(){
    $(document.body).removeClass('running');
});

$(window).on('beforeunload', function(){
    if($(document.body).hasClass('running')){
        return "There is still a pending AJAX request.  Are you sure you want to leave?";
    }
});

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).addClass("done");
});

Don't you want `if($(document.body).hasClass('running')){`? – Ian Apr 12 '13 at 02:14 — Ian, Apr 12 '13 at 02:14

score -1 · Answer 3 · answered Apr 11 '13 at 18:23

-1

You might want to check what context the 'this' variable is in when you are adding the class in your done function. My guess would be that it is pointing to the window in you done function, not your button.

.done(function(){console.log(this);});

answered Apr 11 '13 at 18:23

Bryce

106
6

2

They have clearly set the `context` option as `document.body` – Ian Apr 11 '13 at 18:25

AJAX Disable back button until callback executes

3 Answers3