How to have a jQuery UI tab load a URL/page directly?

Question

I have a set of tabs where the href is the URL I would like to load when the tab is selected.

Following the docs I added the following select option.

$('#example').tabs({
 select: function(event, ui) {
 var url = $.data(ui.tab, 'load.tabs');
 if( url ) {
 location.href = url;
 return false;
 }
 return true;
 }
});

in a <script> tag in the top of each page (ASP.NET master page).

The page loads, but the tab is never selected visually, i.e., the first tab is always selected even though say tab #3 content is displayed.

In tracing the script above in FireBug, once the location.href=url is executed the new page loads and the return statements are never executed. Is this a problem?

Thanks

ADDITIONAL INFO Just wanted to clarify that I am not trying to load the content for a tab via Ajax, but need to do a postback. In conjunction with the postback I want to have the tab that was clicked become the selected tab. Also, the example above is from Section 3.6 on the jQueryUI/Tabs page.

Answer 1

In tracing the script above in FireBug, once the location.href=url is executed the new page loads and the return statements are never executed. Is this a problem?

After you do location.href=url you leave the page and current code stops executing.

From your code you cannot know which page is current to select it. You need to add CSS selector to the current element that indicates that or load content via AJAX.

---

TO SELECT CURRENT TAB:

First thing you need to know is which page corresponds to which tab. As you haven't provided such information I will just assume that URL has tab parameter that defines selected tab.

You need to provide the index of currenttab in the ASPX (todo: validate QueryString):

<%= string.Format("var currentTab = {0};", Request.QueryString["tab"]) =>

And in your JavaScript use this code:

$('#example').tabs({
  selected: currentTab || 0,
  select: function(event, ui) {
    var url = $.data(ui.tab, 'load.tabs');
    if(url) {
      location.href = url + "?tab=" + ui.index;
      return false;
    }
    return true;
  }
});

But please:

Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).

---

TO LOAD TAB VIA AJAX:

I do not know where you could find the code you posted in the jQuery docs, but that is incorrect one.

According to the docs:

Tabs supports loading tab content via Ajax in an unobtrusive manner.

The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly:

So the HTML should be:

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

and the JavaScript should be:

$(function() {
  $("#example").tabs();
});