event on tab deselect in jquery ui tabs

Question

Hi

I m using jquery ui tabs 1.8.1

I want to bind an event or a script to run when a tab gets deselected and any other tab is selected

for eg. if i have four tabs and tab four is selected when i select tab 1 or tab 2 then a event should run such that i can stop any timers running in tab 4

Another question related is if i m running any timers using this

or if i m using setInterval using standard jquery

it doesn't stop automatically on selecting any other tab...

any solution would be a great help...

thanks

Pradyut

India

Answer 1

basically what you want to do is calling an event everytime a tab is selected, except when its tab4, ie.:

when your tabs header looks somehow like this

<div id="tabs">
  <ul id="tablinks">
    <li><a id="tab1" href="#tabs-1">First</a></li>
    <li><a id="tab2" href="#tabs-2">Second</a></li>
    <li><a id="tab3" href="#tabs-3">Third</a></li>
    <li><a id="tab4" href="#tabs-4">Fourth</a></li>
  </ul>
  <div id="tabs-1"></div>
  <div id="tabs-2"></div>
  <div id="tabs-3"></div>
  <div id="tabs-4"></div>
</div>

then you attach a click event on every a tag in the "tablinks" unordered list, that has not "tab4" as an id:

$('#tablinks a[id!=tab4]').click(function(e){
  //stoping timers or whatever
});

and concerning your second questions, the link you provided actually holds the answer to it..

when you create a timer by using "everyTime" or "oneTime" you can pass a label as a parameter, so that you're able to stop your timers whenever you want with the "stopTime" method, ie.:

$(document).everyTime(1000, "doingSomething", function() {
  // NOTE: "doingSomething" is the label of this timer

  // make an annoying bleep sound or whatever
});

now stop this timer by calling

$(document).stopTime("doingSomething");

Answer 2

If you bind to the 'tabselect' event, you can determine the currently selected tab. This will let you do something specific to this tab before the tab switch. You can even return false from the handler to prevent the tab switch. Try the following in a debugger (like Firebug) at the jQuery UI demo site: http://jqueryui.com/demos/tabs/default.html

$('#tabs').bind('tabsselect', function(evt, ui) { 
    console.log($('#tabs').find('li.ui-tabs-selected a').attr('href')); 
});

In the handler you can check the selected tab and do whatever you need for any tab that gets deselected...