1

I have a weird issue with an jQuery AJAX jQuery request. When we generate reports on our site, it can take a while, so we have a status bar that we update with polling. However, what I'm seeing is that these requests seem to be timing out and re-sending - a very weird behavior.

Here's the workflow: -User puts in their email address and clicks "Get Report" -Button triggers the AJAX request (see below). -After making the AJAX request, we send a second, simpler request, to poll a checkStatus function. This function returns a JSON string to a callback that updates the status bar on the screen. -In the original AJAX request's "success" property, we have set a flag to stop the polling, so when the report completes, the polling stops (and the last status update reflects that it's finished).

This works perfectly, except for one small problem. I'm finding that when we have big reports, it seems to send a second getReport request without the user actually doing anything. I can tell this because our status will get to about 700 out of 1000 rows, and then jump back to 15 out of 1000 then 710 out of 1000 then 25 out of 1000, indicating that two reports are being generated simultaneously and updating the status flag with different statuses.

All I can figure is that the original getReport AJAX request is being re-sent for some reason. Is there some timeout or something that I'm not aware of?

Here's the code:

var update = false;

//// Function triggered by user when requesting report
function get_report () {
    if ( !$("#reportEmail").val() ) {
        alert ( "Please enter a valid email address to send the report to." );
        return;
    }

    var dataStr = "email="+$("#reportEmail").val();

    $("#report").html ( "<b>Your report is being generated and will be emailed to you momentarily.</b>" );
    $.ajax({               
        type: 'POST',
        data: dataStr,
        url: "/reports/roster/15",
        success: function() { update = false; }
      });

    $("#completed").css ( 'width',"0" );
    update = true;
    setTimeout ( "checkStatus('reg_roster', updateStatusBar);", 10 );
}

//// Call back from the checkStatus function
function updateStatusBar ( data ) {
    response = jQuery.parseJSON(data);
    if ( response ) {
        $("#statusBar").show();
        $("#completed").css ( 'width', response.completed+"%" );
        $("#msg").html ( response.message );
        if ( update == true )
            setTimeout ( "checkStatus('reg_roster', updateStatusBar);", 1000 );
    }
}

////Polling function to check status
function checkStatus(type, callback) {
$.ajax({  
        type: 'POST',
        async: false,
        data: "&type="+type,
        url: "/status/check/",
        success: callback               
      });
}
Oleg Mikheev
  • 17,186
  • 14
  • 73
  • 95
Seamus James
  • 981
  • 3
  • 12
  • 25
  • 1
    _seems to send_ and _because our status_ are not a very reliable way of making sure the request is actually sent, did you try some network analysis tool like Firebug? – Oleg Mikheev Feb 07 '12 at 19:19
  • I'm sure there's a second request coming through. And a third, if I wait long enough. And a fourth after that. By watching the status bar jumping around, I can see that there are multiple requests being executed. – Seamus James Feb 07 '12 at 19:28
  • Checked it with firebug, and sure enough, as soon as the first request changes to "aborted" I start seeing results from a new request coming through. To be fair, I don't see a second request going out, but on my server I can see a second request being made. – Seamus James Feb 07 '12 at 19:35
  • Also, tried setting the timeout in the ajax request to 1000000. No difference. – Seamus James Feb 07 '12 at 20:04
  • please try adding `error: function(x, t, m) { alert(t); }` to see if it really times out – Oleg Mikheev Feb 07 '12 at 20:15
  • Just a thought, but could it be that the second AJAX call from checkStatus is synchronous (to prevent overlapping status checks)? – Seamus James Feb 07 '12 at 21:58
  • it could be easily tested :) async=true means that the script will be blocked until response is received, and probably timeout doesn't fire b/c of that, and probably browser decides to re-send request on its own... please keep us posted :) – Oleg Mikheev Feb 07 '12 at 22:05
  • Error alert shows nothing. No error. Also, I'm working in Chrome and FF - same behavior in both. – Seamus James Feb 07 '12 at 22:07
  • but have you tried to remove `async: false`? – Oleg Mikheev Feb 07 '12 at 22:18
  • No effect with removing async: false; Same thing. Also, I should mention that this script works exactly as expected on smaller reports. Seems to be around 650-700 entries that this begins to occur. I'm beginning to think it's a PHP thing... – Seamus James Feb 07 '12 at 22:27
  • Fixed it! It was definitely a jQuery/AJAX thing, but I still don't know what. I simply added `async: false;` to the initial request and the problem cleared up. So for whatever reason, the AJAX was sending multiple requests after all. – Seamus James Feb 07 '12 at 22:51
  • Dangit, maybe not. On the first one through, it seemed to work, but now it hangs the browser really bad. Not sure what I'm going to do with it. – Seamus James Feb 07 '12 at 23:03
  • I'm going to try a new thread with a more concise assessment of the problem. – Seamus James Feb 07 '12 at 23:53

0 Answers0