jqueryui ajax tab stops loading if other tabs are clicked

Question

I have a jQueryUI tab control set up that has two tabs. One loads its content via ajax, and is the default tab. The other is a simple non-ajax tab.

When a user visits the page, the ajax tab is shown. Since it takes at least 5-10 seconds for the content to load, some users click to view the 2nd tab. At this point, it appears like the ajax call is cancelled when the 2nd tab is displayed - the tab's loader disappears, and clicking back to the ajax tab just shows a blank div. Since I have caching turned off, the tab does not reload. Turning on caching would allow the user to at least request the data again, but since these calls can take a loooong time, this is not a workable solution.

The ideal behavior in this situation would be for the ajax tab to continue keep its request open even if other tabs are clicked.

Is this possible?

Answer 1

The default behavior is to call an .abort() on the pending request, you can see it in the source here:

if ( this.xhr ) {
  this.xhr.abort();
  delete this.xhr;
}

But you could trick it a bit and remove the reference to that previous XmlHeepRequest using the select event handler, like this:

$("#tabs").tabs('destroy').tabs({
  select: function(event, ui) {
    $(this).data("tabs").xhr = null;
  }
});

This works because the select event handler is triggered before that .abort() call when selecting.