CODEWITHSUNDEEP
jqueryajaxjquery-uipostjquery-ui-tabs
daGUY
daGUY

Reputation: 28743

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.

Upvotes: 5

Views: 26664

Answers (4)

user3483642
user3483642

Reputation: 320

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");
       }
    }
});

Upvotes: 17

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

Ui-tabs provide a function which is triggered when you select a tab.

$( ".yourTab" ).tabs({
   select: function(event, ui) {
        if(ui.index == myTabIndex) {
            $.post(URL, function(data){
              ...
            });
        }
   }
});

Note Use activate for new versions.

reference

Upvotes: 8

Sashenka
Sashenka

Reputation: 246

The select event has a ui parameter where you can check the index of the selected tab. This SO question has many examples: jQuery UI Tabs Get Currently Selected Tab Index

You can then do the ajax call when you have checked the index of the tab.

EDIT: You also have many examples in the official Jquery UI doc here: http://docs.jquery.com/UI/Tabs

Upvotes: 1

Engineer
Engineer

Reputation: 48793

You may try something like this:

/*tab placeholder*/.tabs({
    select: function(event, ui) {
       if(ui.item.id === "my-tab"){
           //explicitly trigger mouse click on tab
           $(ui.item).trigger('click');
       }
    }
});
//------------------
$("#my-tab").click(function(){
    alert('something')
});

Upvotes: 1

Related Questions