Ajax check if Url exists then redirect - ajax

Question

Sorry to ask such a basic question. I would like to add an Ajax feature to my input page which does:
use the blockUI plugin to add a popup window which tells users to wait
in the meanwhile ajax detects the existence of output page
if calculations are finished, ajax redirects the browser to the output page (batchoutput.html)
If everything goes well, the popup message will appear for around 1-2 mins until the calculations are done, then the browser will be redirected to the batchoutput.html page.
However, the situation is: the popup message window appears only for a second, then after a min or two the browser goes to the batchoutput.html. My guess is something is wrong with my ajax function. It seems like the ajaxstart and ajaxstop are misfired. Can I have some suggestions?
Here is the code:
$('.input1_button').click(function () {
$(document).ajaxStart(function(){
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
});
$(document).ajaxStop(function(){
$.unblockUI();
});
$.ajax({
type: "post",
url: "/batchoutput.html",
data: $(".articles").serialize(),
dataType: "html",
success: function() {
window.location = '/batchoutput.html';
}
});
});

Answer 1

ajaxStop is fired right after the ajax request is complete, and complete means error or success.
Therefore, what happens after you click a button is:
ajaxStart is fired, causing UI to block
ajax request to /batchoutput.html is performed
if request fails, ajaxStop is fired, causing UI to unblock
My suggestion is to:
block UI on button click (i.e. move $.blockUI directly into click function)
after that, send ajax request repeatedly until it finishes with success (you can use Javascript's native function setInterval or trigger next request on ajaxError)
when request succeds, unblock UI and redirect (this can be done either directly in success callback or in ajaxSuccess method)