jQuery UI Tabs with remote content, link to current page with tab selected

Question

In previous versions of jQuery UI (<=1.8), the link for a remote tab would be swapped with a local link when the tabs are loaded. This made it possible to center click (aka, open link in new browser tab) on the tab, and it would deep link to the current page with the tab selected. This is the behavior I would like to maintain.

Old Tabs:

<div id="tabs">
  <ul>
    <li><a href="some-ajax-content.php" title="section1">Content 1/a></li>
    <li><a href="some-other-ajax-content.php" title="section2">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

After calling $('#tabs').tabs(), this would result:

<div id="tabs">
  <ul>
    <li><a href="#section1" title="section1">Content 1/a></li>
    <li><a href="#section2" title="section2">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

New Tabs (With UI >=1.9)

<div id="tabs">
  <ul>
    <li aria-controls="section1"><a href="some-ajax-content.php">Content 1/a></li>
    <li aria-controls="section1"><a href="some-other-ajax-content.php">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

After calling $('#tabs').tabs():

<div id="tabs">
  <ul>
    <li aria-controls="section1"><a href="some-ajax-content.php">Content 1/a></li>
    <li aria-controls="section1"><a href="some-other-ajax-content.php">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

After calling $('#tabs').tabs(), the href attribute is not swapped. This means that if a user clicks to open a link in a new tab, the will directly load the ajax content. As I would expect is common, the ajax content is just part of the page that shouldn't be rendered on it's own. Is there an easy way to change the markup to restore the previous behavior?

Thanks.

lipeiran · Accepted Answer · 2013-10-15 15:07:59Z

I was stuck on this one for a while and I figured it out.

Before JQuery UI 1.9, it converts to use "#" to show the div and the URL used for ajax loading is stored as a data object on

So for JQuery UI >=1.9, I tried to mimic the same behaviour. In JQuery >=1.9, aria-controls attribute is used to select the div associate for each tab.

The following worked for me.

$("#tabs").tabs({
    beforeActivate: function (event, ui) {
        //...do stuff
        var numOfTabs = $('#tabs ul li').size();
        //change href to use # instead of URL directly, stores URL as data object
        for (i=0; i<numOfTabs; i++) {
            $(ui.newTab).parent().find("li a").eq(i).data("href.tabs",$(ui.newTab).parent().find("li a").eq(i).attr('href'));
            $(ui.newTab).parent().find("li a").eq(i).attr('href', '#'+$(ui.newTab).parent().find("li").eq(i).attr('aria-controls'));
        }
        //...do stuff
    },
    activate: function (event, ui) {
        //...do stuff
        var numOfTabs = $('#tabs ul li').size();
        //use URL stored in data object as href
        for (i = 0; i < lenTabs; i++) {
            $(ui.newTab).parent().find("li a").eq(i).attr('href', $(ui.newTab).parent().find('a').eq(i).data("href.tabs"));
        }
        //...do stuff
    }
});

Collectives™ on Stack Overflow

jQuery UI Tabs with remote content, link to current page with tab selected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related