jQuery EasyUI tabs within tabs and Ajax

Question

Let's say I have some jQuery EasyUI tabs within some other tabs. The inner tabs are loaded via Ajax on click of an outer tab. On click of an inner tab, I want to load some content via Ajax inside the clicked inner tab's panel. The problem I have is that because the inner tabs are loaded via Ajax, I cannot use this:

$('.inner_tabs').tabs({
    onSelect: function(title, index){                           
        // do stuff
    }       
});

to load content in my inner tab panel (because the inner tabs are added later in the DOM (So, $('.inner_tabs') is not even recognized). I know usually this problem is fixed by using the .on() method of jQuery. But how can I apply this to my current situation? How can I use .on() with the onSelect callback of jQuery EasyUI?

@ukung, Saigitha's answer seems to be correct. You need to re-initialize the tabs after the ajax request finishes, which is what their answer accomplishes. Is there a problem you are having with it? — Cave Johnson, Mar 21 '17 at 20:38

score 3 · Answer 1 · edited Mar 23 '17 at 20:51

You need to re-initialize the inner tabs within the success callback of the ajax request after the inner tabs have been added to the DOM.

You can do it like this:

$('#outer_tabsid').tabs({
    onSelect: function(title, index){                           
    $.ajax({type: "POST",
       url: "ajaxurl.jsp?param="+index,                    
       success: function (response) {
       var innertabid='innerTab'+index;
       $('#outer_tabsid').tabs('add',{  
             title:'New Tab',  
             content:'<div id="'+innertabid+'" class="easyui-tabs" style= "width:500px;    height:250px;">',
          });
          $('#'+innertabid).tabs({
              onSelect: function(title1, index1){
                  // ajax call to load the selected innertab;
               }
         });

   });
    }       
});

jQuery EasyUI tabs within tabs and Ajax

1 Answers1