jquery tabs load event

Question

Below is jQuery's example of how to get links inside the tabs' panel to load within that panel.

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

However, the line $(ui.panel).load(this.href); will not fire the tabs load event so after you load one link the rest are normal

the reason i ask is cause i have a nested accordion inside my tabs and i want to paginate it via serverside pagination, but when i use the page links it won't remake the accordion.

I want something like this

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $(".products", ui.panel).accordion();
          $(".product_link", ui.panel).colorbox();

          $('a', ui.panel).click(function() {
              $(ui.panel).load(this.href);
              return false;
          });
      }
   });
});

This seems to get me almost there, however $(ui.panel).load(this.href) only loads it into the first panel no matter what tab i am on

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $(".products", ui.panel).accordion();
          $(".product_link", ui.panel).colorbox();

          $('a', ui.panel).live('click',function() {
              $(ui.panel).load(this.href,function(){
                           $(".products").accordion();
                           $(".product_link").colorbox();
                        });
              return false;
          });
      }
   });
})

any ideas?

Answer 1

try using ui.tab.hash inside load event or select event

Answer 2

Try this out:

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

If I get you correctly, after you refresh the content using $.load the links you've bound your click handler to no longer do what they should. That's because you're replacing all those links via your ajax call, so after you click one, all of them get replaced and no longer have the click event handler binding.

jQuery.live prevents them from losing their bound event handler(s), by automatically re-attaching the event handlers to newly injected elements matching your selector. See:

http://docs.jquery.com/Events/live

EDIT: try re-attaching the accordion within $.load's callback:

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $(".products", ui.panel).accordion();
          $(".product_link", ui.panel).colorbox();

          $('a', ui.panel).live("click", function() {
              $(ui.panel).load(this.href, function() {
                  $(".products", ui.panel).accordion();
                  $(".product_link", ui.panel).colorbox();
              });
              return false;
          });
      }
   });
});