2

EDIT - PROBLEM SOLVED : It ended up being a server side problem. More details in comments below.

My webpage allows the user to update a graph based on parameters. When a user changes selection (checking/unchecking options), the graph is updated by an Ajax call.

The problem happens when the user quickly checks/unchecks options. When it happens, I made sure the current request is aborted and a new one is made. Here's my simplified code :

function refreshGraph() {
    // Abort current running request (if any)
    var currentlyLoading = (xhrDashboard != null && xhrDashboard !== undefined);
    if (currentlyLoading) {
        xhrDashboard.onreadystatechange = null;
        xhrDashboard.abort();
    }

    // Ajax call.
    var ajaxParams = {
        url: '/Dashboard/ReadyMix/GraphPartial',
        data: parameters,
        traditional: true,
        cache: false,
        type: 'POST',
        success: function (responseData) {
            $(".graphContainer").html(responseData);
        },
        error: function (xhr, text_status, error_thrown) {
            $(".graphZone").html("Error during loading...");
        },
        complete: function (xhr) {
            xhrDashboard = null;
        }
    };
    xhrDashboard = $.ajax(ajaxParams);
}

In Chrome I get the expected behavior. The first (or latest) call is cancelled and the new one is made no matter how many changes the user makes in a short lapse of time (ex : 5 option changes in a few seconds).

Internet Explorer (version 11 tested on multiple machines) start waiting indefinely from the moment I change option fast enough to abort 2 request and start a 3rd one. When launching my app in debug (Visual Studio) it works fine, but as soon as I put it on our sandbox server the problem occurs.

Here's a screenshots with Chrome (sandbox server) Chrome network screenshot when aborting ajax requests then making a new one

Now here's a screenshot of IE stuck on "waiting" IE network screenshot when stuck on waiting after aborted ajax requests

Any suggestion would be appreciated.

Nick102
  • 21
  • 3
  • Try calling `abort()` before amending `onreadystatechange`. In theory it shouldn't make a difference, but never discount anything when dealing with IE – Rory McCrossan Nov 10 '16 at 16:08
  • `.onreadystatechange = null;` is useless since it is a jQuery object, not XHR – epascarello Nov 10 '16 at 16:10
  • I tried @RoryMcCrossan suggestion but it had no effect. – Nick102 Nov 10 '16 at 16:14
  • Problem solved! It was related to session state. More information here [link](http://stackoverflow.com/questions/941889/browser-waits-for-ajax-call-to-complete-even-after-abort-has-been-called-jquery). The solution for my specific stack (ASP.NET MVC) was to add the following attribute on my controller's class [SessionState(SessionStateBehavior.ReadOnly)]. In PHP, calling session_write_close() should fix the issue. – Nick102 Nov 11 '16 at 20:43

0 Answers0