AJAX tabs stop functioning properly after AJAX error callback is executed

Attached a patch to handle ajax errors. Currently the error message is hard coded.

Similarly, if the ajax request takes a long time, the user may click on a different tab. This causes the same behavior described for the error case -- the slow-loading tab becomes selected when the user clicks the next tab, the content is not loaded (so you end up with a blank panel), and the tab clicks become off-by-one in the stack of clicks.

To illustrate, consider the case of three tabs. Tab 1 is the currently selected. Tab 2 is a slow-loading tab. Tab 3 loads in a reasonable time.

The user starts on Tab 1 with the content loaded. He then clicks on Tab 2, but Tab 1 is still indicated as selected, since Tab 2 hasn't loaded yet. He quickly gets tired of waiting, so he clicks on Tab 3 before Tab 2 has loaded. At this point, Tab 2 becomes the selected tab, but there is no content in it. If he then clicks on Tab 3 again to try to get it to load, it does, but it has either the content for Tab 1 at the top and the content for Tab 3 at the bottom, or it has the blank div for Tab 1's panel at the top and the content for Tab 3 at the bottom (this is easiest to see if there is a minimum height set on the panels).

If instead of clicking Tab 3 a second time he clicks on Tab 1, he gets the off-by-one error behavior. Tab 3 will become selected when he clicks on Tab 1 with the double-content problem described above. If he then clicks on Tab 1 again, he will have the content from both Tab 1 and Tab 3 visible.

Obviously there is a more fundamental bug in the tabs than what this ticket initially suggests. However, I think the core if the issue would probably be corrected if selecting a tab always immediately updated the UI and displayed a spinner in the newly-displayed tab panel.

Getting this behavior may be as simple as moving

self.element.dequeue("tabs");

outside of the ajax callbacks and calling a new

displayPanelSpinner

function (as well as adding a new option for a

panelSpinner

). However, I haven't tried that fix yet.

This error is easily replicated by setting up the the three tabs as described above with normal ajax tab settings and setting a two second sleep on the server side for one of the tabs' target urls. As mentioned above, it is important to set the panels to have a minimum height in the css to be able to see the panels loading improperly.

I have verified that moving the

self.element.dequeue("tabs");

line out of the success callback does fix the slow tab/fast user errors. Presumably the same would work well with the patch attached to this ticket for the ajax error callbacks.

The end of my

load

function now looks like:

		this.xhr = $.ajax($.extend({}, o.ajaxOptions, {
			url: url,
			success: function(r, s) {
				$(self._sanitizeSelector(a.hash)).html(r);

				// take care of tab labels
				self._cleanup();

				if (o.cache) {
					$.data(a, 'cache.tabs', true); // if loaded once do not load them again
				}

				// callbacks
				self._trigger('load', null, self._ui(self.anchors[index], self.panels[index]));
				try {
					o.ajaxOptions.success(r, s);
				}
				catch (e) {}
			}
		}));

		// last, so that load event is fired before show...
		self.element.dequeue("tabs");
		return this;
	},

Added [attachment:ticket:4451:jquery.ui.tabs.js-4451.patch patch] against [source:/trunk/ui/jquery.ui.tabs.js@3488 r3488] which merges [attachment:ticket:4451:ui.tabs.js-4451.patch joerns patch] with the following changes

• don't display an error message in the tab panel
• pass extra information to the error handler
• the index of the broken tab
• the anchor that initiated the request

Replying to [comment:6 andrew.sharpe.7.9]:

And also moves

self.element.dequeue("tabs");

out of the success callback as suggested by itfische.

Patch tested by ogdoad8 http://forum.jquery.com/topic/ajax-tabs-bug-4451-patch-is-good

Fixed in r3846. I removed the e-argument and changed it to call options.ajaxOptions.error to be consistent with options.ajaxOptions.success. Also extended the ajax demo to demo slow-loading and broken tabs.