Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trigger a function when a jQuery UI tab is clicked/made active?

I'm using jQuery tabs and the content in one of the tabs is retrieved via an AJAX call. But I don't want to trigger the call until the tab is clicked (made active) because the user might not necessarily click it. What's the best way to do this?

jQuery UI provides select and show events for the tabs, but these fire when any tab is selected or shown, not just a specific one (as far as I know).

I've also tried assigning a click event to the specific tab's ID:

$("#my-tab").click(function(){
...
     $.post(URL, function(data){
          ...
     });
...
}

But this seemingly has no effect and the call is never triggered.

like image 959
daGUY Avatar asked Jul 12 '12 17:07

daGUY


People also ask

How to trigger active tab in jQuery?

Try using the a[href=""] selector: $('#tabUL a[href="#tabProducts"]'). trigger('click');

How to disable tab using jQuery?

The jQuery UI Tabs disable() method is used to disable the tabs widget. Syntax: $( ". selector" ).

How do you activate a tab?

To change between tabs, click the tab you want to become active. You can also use any of the below shortcut keys when working with tabs in most programs. Ctrl + Tab = Switch between open tabs. Ctrl + Shift + Tab = Switch between open tabs in opposite direction.


1 Answers

The ticked solution doesn't work any more because jquery-ui has changed. Also you need to call the tabs function on the entire tab-set, not just one tab. And ui.index needs to be replaced. If the 2nd panel has the id "tab2" then you can use:

$("#tabs").tabs({
    activate: function(event, ui) {
       if (ui.newPanel.selector == "#tab2") {
            alert("tab 2 selected");
       }
    }
});
like image 158
user3483642 Avatar answered Nov 15 '22 09:11

user3483642