jQuery Ajax, prevent the refresh button when the ajax is in progress

Question

Hi i have to perform perform like, when the ajax is in progress, then do not allow the user to do page refresh.

here is the code i have

$('#submit').click(function() {
        $(function() {
        $(".col1").mask("Generating csv...."); //This will generate a mark, Here i would like to prevent the user from doing any sort of operation.
        var to = $('#filters_date_to').val();
        var from = $('#filters_date_from').val();
        $.ajax({
            url:"../dailyTrade/createCsv?filters[date][to]="+to+"&filters[date][from]="+from,success:function(result){
                if(result) {
                     $(".col1").unmask(); //Here we can unlock the user from using the refresh button.
                     window.location = '../dailyTrade/forceDownload?file='+result; 
                     setTimeout('location.reload(true);',5000);
                }
            }
            });

        });
   });

Any suggestions.

If you're referring to "refresh" button of Browser then you **should not** do this. — Praveen, Mar 24 '14 at 12:00
Possible dublicates: http://stackoverflow.com/questions/11094887/prevent-user-to-reload-page-using-jquery-or-javascript , http://stackoverflow.com/questions/3527041/prevent-any-form-of-page-refresh-using-jquery-javascript — Al.G., Mar 24 '14 at 12:04

score 2 · Answer 1 · answered Mar 24 '14 at 12:03

2

Best you can do is use onbeforeunload to present the user with a message saying that a request is in progress and asking them if they are sure they want to proceed.

e.g.

var req;

window.onbeforeunload = function() { 
 if(req) {
   return 'Request in progress....are you sure you want to continue?'; 
 }
};


//at some point in your code
req = //your request...

You cannot, in any way, prevent the user from leaving your page using JS or anything else.

answered Mar 24 '14 at 12:03

Adam Jenkins

51,445
11
72
100

True, but user still will be able to perform page refresh. – DRAX Mar 24 '14 at 12:06
@DRAX - True, but there is absolutely nothing you can do to stop them, just like there's nothing you can do to stop them from closing their browser, or pushing the power button on their computer. – Adam Jenkins Mar 24 '14 at 12:07
@Adam Exactly, that's why I have posted that resuming should be implemented. Simple example would be when you start downloading, and restart browser you can resume download. – DRAX Mar 24 '14 at 12:10

Yasser Shaikh · Accepted Answer · 2014-03-24T12:06:27.347

0

I doubt if you should do that.

$(window).bind('beforeunload',function(){
    return 'are you sure you want to leave?';    
});

If you are talking about a refresh "html button" on your web page, that can easily be done. Just before you make your ajax call, disable your refresh button and on success/error function of the ajax call enable it.

Disable button

$("#refreshBtn").attr("disabled", "disabled");

Enable button

$("#refreshBtn").removeAttr("disabled");

edited Mar 24 '14 at 12:06

answered Mar 24 '14 at 12:00

Yasser Shaikh

46,934
46
204
281

What about SO feature when reloading page when You start typing new question? Then You will be prompt if You are sure. If not then no reload happens. So maybe there is a way to force not to reload. – szpic Mar 24 '14 at 12:03
You could do it using the `beforeunload` event. – Yasser Shaikh Mar 24 '14 at 12:06
i used $(window).bind, so that i can unbind after the ajax request is complete, thanks Yasser – RONE Mar 24 '14 at 12:28
@RaviMone you could have used: `window.onbeforeunload = $.noop;` to unbind it if binding it using `window.onbeforeunload = function() {...}; ` – A. Wolff Mar 24 '14 at 12:29
Thanks for a alternative solution, – RONE Mar 24 '14 at 12:31

DRAX · Answer 3 · 2014-03-24T12:18:24.273

You cannot do it just by inserting JavaScript code.

Only ways I can think of are:

Use synchronous ajax call, on that way browser should freeze (however it will notify user that script is taking too long to process and user will be able to stop execution)
Write browser plugin that will modify browser behavior (eg. prevent refreshing page for url that you preset)

Both ways are ugly and I wouldn't recommend doing it.

You should modify your script so it can resume execution if page has been refreshed (use HTML5 localStorage).

http://www.w3schools.com/html/html5_webstorage.asp

In your case, I would put in localStorage simple state (boolean) to check did ajax call happened or not. If it did happened, then just try calling again same url and you will get file name. But on server side (if you haven't done already) you should implement caching, so when same url is called twice, you don't need to make two separate files, it could be same file (server will be much lighter on hardware resources).

It should be noted that synchronous ajax call won't stop chrome to navigate. It doesn't handle it as FF e.g would — A. Wolff, Mar 24 '14 at 12:26

jQuery Ajax, prevent the refresh button when the ajax is in progress

3 Answers3