ITWorker ITWorker - 4 months ago 11
jQuery Question

How to catch activation of a specific jQueryUI tab?

I have the following html:

<div id="tabsuseradmin" class="tabui">
<ul>
<li><a href="#tabs-1ua">Add Users</a></li>
<li><a href="#tabs-2ua">Delete Users</a></li>
</ul>
<div id="tabs-1ua">
<div>
</div>
</div>
<div id="tabs-2ua">
<div>
</div>
</div>
</div>


and the following inside my js file document ready function:

$('.tabui').tabs({
activate: function (event, ui) {
$.ajax({
cache: false,
url: "/Session/Index/",
success: function (result) {
if (result.length == 0) {
window.location.href = '/Home/Index/'
}
}
});
}
});


$("#tabs-1ua").tabs({
activate: function (event, ui) {
alert("User add tab has been clicked.");
}
});


Above, you can see I am trying to specify behavior for all tab selections in general using the class
tabui
(this works fine) and also a specific behavior for an individual tab. This specific action does not work (the alert message does not appear and the breakpoint on the alert doesn't get hit). What should I do to fix it? Thank you.

Answer

Based on your comments, you want to do this:

https://jsfiddle.net/Twisty/eoa9tafm/

$(function() {
  $('.tabui').tabs({
    activate: function(event, ui) {
      $.ajax({
        cache: false,
        url: "/Session/Index/",
        success: function(result) {
          if (result.length == 0) {
            window.location.href = '/Home/Index/'
          }
        }
      });
    }
  });

  $("a[href='#tabs-1ua']").click(function(event, ui) {
    alert("User add tab has been clicked.");
  });
});