[RESOLVED]Button click on selected Jquery Tab

Hey guys,

I’ve upgraded to jquery 1.11 and now my code doesn’t work. I basically want to execute a button click when they select a tab. Here’s the code that use to work.

$("#tabs").tabs({
                    //Read selected tab/index
                    show: function (event, ui) {
                        switch (ui.index) {
                            case 0:
                                $(".selector").tabs("option", "cache", true);
                                break;
                            case 1:
                                if (UserID != null) {
                                    $(".selector").tabs("option", "cache", true);
                                    document.all("ctl00_ContentPlaceHolder1_btnGetMusic").click();
                                }
                                break;
                            case 2:

                                if (UserID != null) {
                                    $(".selector").tabs("option", "cache", true);
                                    document.all("ctl00_ContentPlaceHolder1_btnGetArt").click();
                                }
                                break;
                            case 3:

                                if (UserID != null) {
                                    $(".selector").tabs("option", "cache", true);
                                    document.all("ctl00_ContentPlaceHolder1_btnGetOther").click();
                                }
                                break;
                        }
                    }
                });

When I select a tab, it doesn’t do anything. It’s like it never goes through the case statement. Thoughts?

Need more information. Couple of things to check

1. Is there any javascript errors when the page loads. You can check that by looking at the status bar in IE. On the latest versions of the IE, triple click on the status bar to check the javascript errors

2. Repeat the above procedure when you select the tab. I.e. to check if there is any javascript error after selecting the tab.

Let me know on the above to deal further.

Hi phamster,

You can not use "Show" function in the Jquery UI 1.11.

Before Jquery 1.9 UI ,you can use "Select" function to get the selected Tab click event

But After Jquery 1.9 UI, you need to use "Activate" function to get the selected Tab event.

You also can not get the selected tab index like "ui.index" after  Jquery UI 1.9

Please try the code below:

 $(document).ready(function () {
           
            $('#tabs').tabs({
                activate: function (event, ui) {
                    currentTabIndex = ui.newTab.index().toString();
                    alert('Tab number ' + currentTabIndex + ' - ' + "clicked");
switch(currentTabIndex){
.../
} } }); });

Best Regards,

Kevin Shen.

Kevin Shen – MSFT

Hi phamster,

You can not use "Show" function in the Jquery UI 1.11.

Before Jquery 1.9 UI ,you can use "Select" function to get the selected Tab click event

But After Jquery 1.9 UI, you need to use "Activate" function to get the selected Tab event.

You also can not get the selected tab index like "ui.index" after  Jquery UI 1.9

Please try the code below:

 $(document).ready(function () {
           
            $('#tabs').tabs({
                activate: function (event, ui) {
                    currentTabIndex = ui.newTab.index().toString();
                    alert('Tab number ' + currentTabIndex + ' - ' + "clicked");
                    switch(currentTabIndex){
                         .../
                      }

                }
            });
        });

Best Regards,

Kevin Shen.

Thank you, that works!

$('#tabs').tabs({
                    activate: function (event, ui) {
                        currentTabIndex = ui.newTab.index().toString();

                        switch (currentTabIndex) {
                            case '0':
                                $(".selector").tabs("option", "cache", true);
                                break;
                            case '1':
                                if (UserID != null) {
                                    $(".selector").tabs("option", "cache", true);
                                    document.all("ctl00$ContentPlaceHolder1$btnGetMusic").click();
                                }
                                break;
                            case '2':

                                if (UserID != null) {
                                    $(".selector").tabs("option", "cache", true);
                                    document.all("ctl00_ContentPlaceHolder1_btnGetArt").click();
                                }
                                break;
                            case '3':

                                if (UserID != null) {
                                    document.all("ctl00_ContentPlaceHolder1_btnGetOther").click();
                                }
                                break;
                        }
                    }
                });


Leave a Reply