I encountered a rather frustrating problem with jQuery UI tabs this week. The problem occurs when trying to tabify some content after using jQuery’s $().load method to load the tabs HTML via an ajax request.
The following code works perfectly in all browsers except IE6 and IE7 (It works fine in IE8 as well), as can be seen in the screenshot below.
$('#deviceDetailsWrapper').load('/device/details/294', null, function() {
$('#tabs').tabs();
});
However, here is what renders in IE6/7. For some reason, the jQuery tabs are triggering a GET request of the current URL and loading the content into the tab itself. Below you are actually seeing the entire page loaded inside the tab. I discovered this by inspecting the DOM tree within the tab in Firebug, as well as loading up Fiddler and watching the tab call an entirely separate GET request to the current URL as soon as the tabs were loaded. Strange behavior to me, since I am not entirely familiar with the jQuery tabs.
The Solution
The only thing I discovered was different regarding the .tabs() DOM manipulation in the different browsers was the ID of the tab – instead of being the #tab-id that I named it, the element was being assigned the full URL+#id to the container. So “#tab1” was becoming “http://localhost/device#tab1” – which I believe was triggering the tabs to behave in their “ajax” mode, which is a built-in feature of the jQuery tabs.
The solution I found was opening up jquery.ui.all.js and locating the following code:
this.$tabs.each(function(i, a) {
var href = $(a).attr('href');
// inline tab
if (fragmentId.test(href))
self.$panels = self.$panels.add(self._sanitizeSelector(href));
Replace it with the following:
this.$tabs.each(function(i, a) {
var href = $(a).attr('href');
// Fix tab IDs in IE6/7
href = href.substring(href.indexOf("#"));
// inline tab
if (fragmentId.test(href))
self.$panels = self.$panels.add(self._sanitizeSelector(href));
Hopefully this helps someone in their googling of this problem. I will be logging this as a bug with the jQuery developers.