Jquery UI tabs abort does not work.

Question

Hi

I have a jquery ui 1.7 tab and I am trying to "abort" the request.

so I have this in my document rdy.

   $.ajaxSetup(
        {
            'timeout': 10000,
            'error': function errorCallback()
            {
                jAlert('The server is acting a bit slow. Your request has timed out. Please try again.', 'Server Time Out Error.');
                $('#tabs').tabs('abort');
            }
        });

        $("#tabs").tabs();

However when looking my ajax requests with firebug the requests are not terminated. They keep on running.

I see the alert box so I know it is timing out but the request still keeps on going.

Edit

I just don't know why this is happening. Like when a tab gets loaded up it goes to my server and that method always returns a partial view. So I am not sure if is the fact that it is a partial view or not screwing up. It just seems like the request still is trying to go even though I am trying to "abort" it.

Answer 1

Chances are the $('#tabs').tabs('abort'); function is not working because at the time you the error code is evaluated (which is BEFORE you create the tabs), the tabs don't exist yet. Therefore that listener breaks when you try to run it later, which stops jQuery from aborting the XHR request. Try writing a callback function with the three arguments outside of the error block like so:

function errorCallback(XMLHttpRequest, textStatus, errorThrown) { .... }

then call the function from the error block like so:

$.ajaxOptions({'error' : errorCallback });

This prevents the code from the 'errorCallback' function from being evaluated immediately when the ajaxOptions is evaluated. (I think)

If doing this doesn't work, you could always add

XmlHttpRequest.abort();

after the call to jalert to manually abort the xhr request. (This function is the same for both IE and Firefox, not sure about other browsers)

Answer 2

I'd suggest using the ajaxOptions to the tabs() plugin. I use this mechanism successfully.

$('#tabs').tabs({
    ajaxOptions: {
                      timeout: 10000,
                      error: function() {
                                 $('#tabs').tabs('abort');
                             }
                 }
});

One reason that this would be preferred can be found in the documentation for the ajaxSetup method:

See $.ajax for a description of all available options. Note: Do not set handlers for complete, error, or success functions with this method; use the global ajax events instead.

If you were to supply defaults via ajaxSetup, you'd have to provide some defaults there, then other defaults with ajaxError, etc. since you are required to provide global defaults for these using the specific methods. It also restricts the application of these defaults, including aborting any tab methods, to just the tabs plugin, not affecting any other AJAX on the page.

If you were to change your error handling, it's possible that would work as well.

$.ajaxSetup( { timeout : 10000 } );
$('#tabs').ajaxError( function() { $(this).tabs('abort'); } );

Answer 3

Since you say that you see the alert, the Ajax error handler is called and obviously the tabs abort() method is also called. I recommend that you use Firebug to see what is happening when you call the abort method. Download a development version of jQuery UI and place a breakpoint at the ui.tabs.js file (The abort method is close at the end).

Answer 4

Just a guess. Ajax is using the standard TCP/IP networking protocol stack underneath.

Your request may not be getting aborted because you're down in a networking system call.