How to trigger('click') on jquery tab's currently active tab

Question

I have a tabed screen and want to trigger a click on the selected tab once the form is submitted and the return is valid. Here a part of the html:

<ul id="tabUL" class="tabs js-tabs same-height">
    <li class="current">
        <a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a>
    </li>
</ul>

My success command is :

success: function(data, textStatus, XMLHttpRequest) {
    $('#tabUL').find('li.current a').trigger('click');
}

This seems not working... Any help is appreciated :) Regards Andrea

If the tab is already selected, what are you expecting clicking on it to do? — Rory McCrossan, May 24 '12 at 10:15
Is your success function even being hit? Have you tried alerting above the click trigger? — Mathew Thompson, May 24 '12 at 10:20
yes, the success function is hit. I tried with $('#tabUL').find('li.current a').css('background-color', 'red'); and the whole li has been put in red. There are no errors beiing reported... — cwhisperer, May 24 '12 at 10:24
Can you add the `li a`'s click event handler code? That might help to debug the problem. — Prasenjit Kumar Nag, May 24 '12 at 10:42
$(".tabLink").click(function(event){ event.preventDefault(); var url = $(this).data('url'); var idTab = $(this).attr('href'); // set tab to current var li = $(this).closest('li'); li.addClass('current').siblings().removeClass('current'); $(".tabDiv").hide(); //hide all tabs with class tabDiv $.ajax({ url: url, type: 'GET', success: function(data) { $(idTab).html(data); $(idTab).show(); }, error: function(){} }); }); — cwhisperer, May 24 '12 at 13:59

WebChemist · Answer 1 · 2014-10-13T16:19:19.070

Try using the a[href=""] selector:

$('#tabUL a[href="#tabProducts"]').trigger('click');

I put together a jsfiddle demo to show it in action, and how to optionally hide the other tabs since often when I'm programmatically forcing tabs its to require missing mandatory information be entered on the initial tab before unlocking the other tabs...

Edit Here is the contents of the jsfiddle:

HTML

<div id="tabs">
  <ul>
    <li><a href="#tab0">Address</a></li>
    <li><a href="#tab1">Shipping</a></li>
    <li><a href="#tab2">Parts</a></li>
    <li><a href="#tab3">Datasheets</a></li>
  </ul>
  <div id="tab0">
        <h1>This is the first tab (0)</h1>
  </div>
  <div id="tab1">
     <h1>This is the second tab (1)</h1>
  </div>
  <div id="tab2">
     <h1>This is the third tab (2)</h1>
  </div>
  <div id="tab3">
     <h1>This is the fourth tab (3)</h1>
  </div>
</div>
<br/>
Select the
<select id="tabSelect">
  <option value="0">1st</option>
  <option value="1">2nd</option>
  <option value="2">3rd</option>
  <option value="3">4th</option>
</select>Tab and
<input type="checkbox" id="tabHide" checked="checked" /> Lock the Others

jQuery

$(document).ready(function () {
  $('#tabs').tabs();
  $('#tabSelect').change(function () {
        //pass empty array to unlock any locked tabs
    $('#tabs').tabs({disabled: []}).find('a[href="#tab' + $(this).val() + '"]').trigger('click');

    if ($('#tabHide').prop('checked')) {
      //hide will be an array like [0,2,3]
      var hide = Array();
      $('#tabs li').not('.ui-tabs-active').each(function () {
        hide.push($(this).index());
      });      
      $('#tabs').tabs({disabled: hide});
    }
  });
});

score 4 · Answer 2 · edited Oct 17 '13 at 09:57

4

If you want to reload the tab programmatically then i recommend use Jquery Tab API utility like below: This makes first tab active and then activates second tab, quite simple and also raises the events that would be normally raised when you click directly.

$( "#myTabs" ).tabs( "option", "active", 0 );

$( "#myTabss" ).tabs( "option", "active", 1 );

Also you can catch tabs active event like below for performing any operations

$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
    // your custom code on tab click
});

edited Oct 17 '13 at 09:57

Manuel van Rijn

10,170
1
29
52

answered May 24 '12 at 10:21

Imdad

5,942
4
33
53

I don't have a better suggestion – Imdad May 24 '12 at 10:29

score 0 · Answer 3 · answered May 24 '12 at 10:24

rather than trying to trigger the click event itself (which I believe is not possible to invoke a user event programatically in this context), I suggest that you trigger the function that has to be called on click event, you might want to look into triggerHandler

How to trigger('click') on jquery tab's currently active tab

3 Answers3

Linked