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

ajax, jquery, jquery-ui, jquery-ui-tabs, post

Solution

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

Problem

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.

Original source

Related problems