CODEWITHSUNDEEP
javascriptjqueryjquery-ui
ITWorker
ITWorker

Reputation: 995

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.

Upvotes: 0

Views: 36

Answers (2)

wmash
wmash

Reputation: 4202

$("a[href='#tabs-1ua']").on('click', function() {
  console.log("User tab clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<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>

Upvotes: 1

Twisty
Twisty

Reputation: 30883

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.");
  });
});

Upvotes: 1

Related Questions