Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

With jQuery UI tabs, how can I run code after a click on a tab?

With jQuery UI tabs, you can use the select method to run code when a tab is clicked:

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

But the code is run before the just clicked tab has been loaded. I need to run code after new tab has been loaded. How can I do this? Thanks for reading.

like image 903
ben Avatar asked Nov 14 '10 03:11

ben


People also ask

How do I go to a specific tab in jQuery?

click(function () { // bind click event to link $tabs. tabs('select', 4); // switch to tab return false; });

How do I know which tab is clicked in jQuery?

var selectedTab = $("#TabList"). tabs(). data("selected. tabs");

How do I make the first tab active in jQuery?

removeClass('ep_s-click1'). addClass('ep_s1'); }} } }); if i use selected: 0 it will set up the first tab as active but it will now go through the if (theSelectedTab2 == 0) statement and go through adding those classes. if after the page loads i click on those tabs the script works perfect.


1 Answers

API HAS CHANGED. This event is now "activate"/"tasbactivate"; see http://api.jqueryui.com/tabs/#event-activate

----- OLD Answer below -----------

Based on the question it's the tabsshow (not the tabsload) event that is desired...event is triggered when a tab is shown.

Code examples: ( from http://jqueryui.com/demos/tabs/ )

Supply a callback function to handle the show event as an init option.

$( ".selector" ).tabs({
   show: function(event, ui) { ... }
});

Bind to the show event by type: tabsshow.

$( ".selector" ).bind( "tabsshow", function(event, ui) {
  ...
});

The event is useful if you want to set focus on control or similar.

like image 89
Darren Avatar answered Oct 15 '22 13:10

Darren