Search This Blog

Wednesday, December 15, 2010

jQuery UI tabs with ajax problem

Recently I was working on one project where I needed to add some tabs with dynamic loading content. After googling a while I found that jQuery UI has already tabs widget offering out of the box functionality.

To use jQuery UI download javascript and css files from http://jqueryui.com .

Idea is that I will have plain html with some url-s that will be loaded inside tab area when user clicks on tab.

So I have something like this:

<div id="tabs">
  <ul>
    <li><a href="someItems.html">Items</a></li>
    <li><a href="someItems2.html">Items2</a></li>
  </ul>
</div>


jQuery will turn this to nice looking tabs widget. When user clicks on first tab, content will be loaded by ajax from someItems.html page.

The problem is that that we want links inside the tab content to display external content inside tabs. To do that we add following:

$("#tabs").tabs({
  load: function(event, ui) {
    $("#tabs").find("a").live('click', function() {
      $(ui.panel).load(this.href);
      return false;
    });
  }
});

What we have done here is that we declared on load event for tabs widget and assigned click event through live method for every a element inside #tabs container.

So, after we made this after trying you will notice that only first tab is showing all link content in tab area. If you switch to second tab none of the links work.

To fix this we add:

$("#tabs").tabs({
  load: function(event, ui) {
    $("#tabs").find("a").live('click', function() {
      $(ui.panel).load(this.href);
      return false;
    });
  },
  select: function(event, ui) {
    $("#tabs").find("a").die('click');
    $("#tabs").find("a").live('click', function() {
      $(ui.panel).load(this.href);
      return false;
    });
  }
});
We added select event function where we unregister all click events and than again register them with all a elements.

And now we have fully functional dynamic loading tabs.

4 comments:

  1. Thank you so much for this....

    Now it finally works for me, after having spent at least two days with the jqueryui documentation and their code supposedly to the same effect:

    ...open links in the current tab instead of leaving the page

    "Hijax" links after tab content has been loaded:

    $('#example').tabs({
    load: function(event, ui) {
    $('a', ui.panel).click(function() {
    $(ui.panel).load(this.href);
    return false;
    });
    }
    });


    Thanks a million :)

    ReplyDelete
  2. Great work!
    Just one thing. I've got tabs this way: href="#tab-1">Items2
    and the content in open div id="tab-1">
    whit links inside here end div
    Using your fix I could use the links inside the tab content to display external content inside tabs BUT only if I have swapped tabs first I mean if I don`t click on another tab fist any link inside this tab won't display external content inside tabs. Have you got any idea whay is this happening?
    thanks,

    ReplyDelete
  3. Awesome work, just what I was looking for. But replacing the a tag screwed up my fancybox galleries so I changed a to .classname and it did exactly what I needed. Thanks for sharing this!

    ReplyDelete