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

Purpleness

If the tab is already selected, what are you expecting clicking on it to do? – Crosspiece

Try $('li.current').parent().trigger('click'); – Mckee

is your js console reporting any error? – Insecurity

Is your success function even being hit? Have you tried alerting above the click trigger? – Unbeaten

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... – Purpleness

Can you add the li a's click event handler code? That might help to debug the problem. – Seaden

$(".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(){} }); }); – Purpleness

Answer 1

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

Lotetgaronne

Answer 2

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

Mckee

I don't have a better suggestion – Mckee

Answer 3

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

Steepen