CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
PonyTricks
PonyTricks

Reputation: 1798

jQueryUI Tabs show() on specific tab?

I've been checking everything, but cant seem to find how to make the show() event only react on a specific tab?

I have the following tab:

<div id='tabs' class='ui-tabs'>
  <ul class='ui-tabs-nav'>
    <li><a href='#tabs-1'>tab 1</a></li>
    <li><a href='#tabs-2'>tab 2</a></li>
    <li><a href='#tabs-3'>tab 3</a></li>
  </ul>

  <div id='tabs-1'></div>
  <div id='tabs-2'></div>
  <div id='tabs-3'></div>
</div>

And i want the show() event only to react on showing id 1. Is it possible? :)

My JS are:

$(function() { 
  $('#tabs').tabs({
    cookie: {expires: 1}, 
    show: function(event, ui) {
      $('#campaigns-attached').delegate('li', 'dblclick', function() { $('#campaigns-non-attached').append(this); var id = this.getAttribute('id'); campaignsAttachRemove(id); });
      $('#campaigns-non-attached').delegate('li', 'dblclick', function() { $('#campaigns-attached').append(this); var id = this.getAttribute('id'); campaignsAttachThis(id); });
      $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
      $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
    }
  }).disableSelection();
});

The usersAttachThis() and usersAttachRemove() are AJAX callback functions. So if i change tab and then go back to the tab where i need the delegate() function, it will react 3 times.

So i need to say something like

if (tabSelected == "tabs-1") {
  $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
  $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
}

OR, find another to do this, instead of delegate()?

Upvotes: 0

Views: 1003

Answers (2)

PonyTricks
PonyTricks

Reputation: 1798

$(function() { 
  $('#tabs').tabs({
    cookie: {expires: 1}, 
    show: function(event, ui) {
      $('#campaigns-attached').undelegate('li', 'dblclick');
      $('#campaigns-attached').delegate('li', 'dblclick', function() { $('#campaigns-non-attached').append(this); var id = this.getAttribute('id'); campaignsAttachRemove(id); });
      $('#campaigns-non-attached').undelegate('li', 'dblclick');
      $('#campaigns-non-attached').delegate('li', 'dblclick', function() { $('#campaigns-attached').append(this); var id = this.getAttribute('id'); campaignsAttachThis(id); });
      $('#users-attached').undelegate('li', 'dblclick');
      $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
      $('#users-non-attached').undelegate('li', 'dblclick');
      $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
    }
  }).disableSelection();
});

I found the answer :) Just use the undelegate() option before using the delegate() option. Then it won't fire twice.

Upvotes: 0

Vanna
Vanna

Reputation: 2322

If it were possible, and I'm pretty sure it's not, it would invalidate the consistency of the component. Instead why don't you have the "show" event call a function in your script like "fauxShow" and in "fauxShow" check if tab with id="1" was selected and then call function "realShow".

There are dozens of ways to do that, but it might help to get a better answer if you could explain why you only want the event raised on the one tab and not the others.

Upvotes: 1

Related Questions