$.blockUI jQuery plugin blocks back button android / phonegap

Question

I am using the blockUI jQuery plugin for an AJAX call:

//start the plugin
App.utilities.Loading();

$.ajax(url, {
  type: "POST",
  contentType: 'application/json',
  data: JSON.stringify({
    "textcontent": content
  }),
  success: function (data) {
    $.mobile.navigate('discussion.html');
    $.unblockUI();
  }
});

Sometimes the loading takes more than three seconds and if the user is pressing the back button, the back event get triggered after calling $.unblockUI(); Is there a way to go back during the plugin is ON and cancel the Ajax call?

I can get the status of the block UI:

var isUIBlocked = $('.ui-widget-overlay:visible').length > 0;

any ideas?

Answer 1

you can try the following code

//start the plugin
App.utilities.Loading();

//assign the ajax call to a xhr object
var xhr = $.ajax(url, {
    type: "POST",
    contentType: 'application/json',
    data: JSON.stringify({
        "textcontent": content
    }),
    success: function (data) {
        $.mobile.navigate('discussion.html');
        $.unblockUI();
    }
});

//when back button is being clicked
window.onbeforeunload = function (e) {

    xhr.abort();  //abort the above ajax call

    var isUIBlocked = $('.ui-widget-overlay:visible').length > 0;
    if(isUIBlocked) {
        $.unblockUI();
    }
}    

further reading for the jqXHR object of the jquery.ajax function : http://api.jquery.com/jQuery.ajax/#jqXHR