EasyUI Forum

I am having trouble getting the examples to work on how to add a tab dynamically and handle an event.
I have tried onLoad, onSelect, and placed these into the add tab function.
If somebody could please point me in the right direction of what I am doing wrong it would be greatly appreciated.

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

// add a new tab panel
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true
/*,
 onLoad:function(title){
   alert(title+' is loaded');
*/   
});

Please try this:

The following javascript logs to the console for each tab selected.
I do not get the onLoad event displayed in the console at all. Is there something that I am missing, I wanted to use the onLoad event to initialise a google map instance after tab has loaded. In the documentation it says "Fires when an ajax tab panel finish loading remote data." which is great. I just can't seem to get this to occur.

Am I missing something that should be obvious?

$('#tt').tabs({
   onLoad:function(title){
      console.log('onLoad '+title);            
   },
   onSelect:function(title){
      console.log('OnSelect '+title);            
   }   
})

The 'onLoad' event fires only when the remote page is loaded successfully into a panel. Using 'content' property to set the panel content does not trigger the 'onLoad' event. Please try to use the 'href' property instead.

That's working well now thanks, it fires the onLoad event and I can initialise the map object perfectly

..BUT...

Now this function is causing an unwanted behaviour.
After a tab is added, it ALWAYS selects tab index 1 (second tab). It does not matter what order or how many tabs are added, every time a new tab is added to the collection it loads, gets selected but then tab 1 gets selected immediately after load.

As soon as I remove the function, above, tabs behave correctly but of course I cannot use the onLoad event.

Please refer to the attached example 'test.zip'. It works fine.

Thanks stworthy, and yes the example works perfectly.

I tested mine again and same behaviour. The only difference was I had the functions in an externally linked js file
<script type="text/javascript" src="/lib/js/navigationtabs.js"></script>

When the addtab and onLoad/onSelect event handlers and functions are in this file, the tabs behaviour was peculiar.
When the 2 functions are placed into the main php page, everything works correctly just as your example.

Am I overlooking something here that explains why this is behaving in this manner. It seems like a variable scope issue.
I'm guessing that the addTab function sets an "index" variable that does not have scope to the rest of the tabs so after adding a new tab, it always thinks its tab index 1, thus the new tab is added at the end as expected, but then when it is selected as part of the addTab function it selects tab index 1(2nd tab).
When these 2 functions are placed into the html body of the page, it is now in scope and everything is fine.

To solve the issue, I have placed the functions there and everything is great.
Not sure if this is the intended behaviour of the tabs but thank you for your help.