Jquery tabs loading event

The following is a jQuery example of how to get links inside the tab bar for loading inside that bar.

$(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 trigger the tab load event, so after loading one link the rest will be fine

the reason I'm asking is because I have a built-in accordion inside my tabs and I want to paginate it using pagination on the server, but when I use page links, it will not redo the accordion.

I need 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;
          });
      }
   });
});

It looks like me almost there, however $(ui.panel).load(this.href)it 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?

+3
2

:

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

, $.load , , , . , ajax, , , click.

jQuery.live , , . :

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

EDIT: $.load:

$(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;
          });
      }
   });
});
+1

ui.tab.hash

+1

Source: https://habr.com/ru/post/1717374/


All Articles