How to handle select event of tab widget of jquery ui?

Question

I use tab widget of jquery ui in my webpage The initialization is ok. but want to capture the on_selected event of a tab to do something else. I followed docs of jquery but it does not work. doc!

I have tried

    $( "#editor-tabs" ).tabs();
    $("#editor-tabs").bind("tabsshow",function(event,ui){
            alert(ui.index);
    });

and

$( "#editor-tabs" ).tabs({
    select: function(event,ui){alert(ui.index);}
});

Put breakpoints to the callback function and they are not hit.

sorry, I have edited the question – GingerJim Apr 10 '13 at 16:37 — GingerJim, Apr 10 '13 at 16:37

score 9 · Accepted Answer · answered Apr 10 '13 at 19:14

if you use jquery ui 1.10.* , following code is correct. I used the doc by mistake. It is only for 1.8

Better to check your version number if you got a similar problem.

        $("#editor-tabs" ).tabs({                                                                  
            activate:function(event,ui){                                                       
                            alert(ui.index);                                                   
                    }                                                                          
         });

score 7 · Answer 2 · edited May 23 '17 at 11:54

7

See my response for this question which is similar:

https://stackoverflow.com/a/17509685/763629

Note for jQuery UI 1.10.x+ use this:

ui.newTab.index()

edited May 23 '17 at 11:54

Community

1
1

answered Jul 07 '13 at 06:10

technopia

147
3
10

score 0 · Answer 3 · edited May 23 '17 at 12:18

0

Would you mind posting a code example? According to http://api.jqueryui.com/tabs/ therer is no "on_selected" event, but activate, beforeActivate, beforeLoad, create and load.

Also what goal do you want to achieve?

Maybe refer to this one: jQuery - trapping tab select event

 $('#tabs, #fragment-1').tabs({
  select: function(event, ui){
    // Do stuff here
  }
});

edited May 23 '17 at 12:18

Community

1
1

answered Apr 10 '13 at 16:34

DerStoffel

2,553
2
15
25

The last answer in your link works. The api changed. the keyword is "activate" instead of "select". – GingerJim Apr 10 '13 at 17:04

How to handle select event of tab widget of jquery ui?

3 Answers3