web-dev-qa-db-fra.com

Comment déclencher ('cliquer') sur l'onglet actuellement actif de l'onglet jquery

J'ai un écran à onglets et je veux déclencher un clic sur l'onglet sélectionné une fois que le formulaire est soumis et que le retour est valide. Voici une partie du code 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>

Ma commande de réussite est:

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

Cela semble ne pas fonctionner ... Toute aide est appréciée :) Observe Andrea

javascriptjqueryeventsjquery-ui-tabseventtrigger
8
cwhisperer

Essayez d’utiliser le sélecteur a[href=""]:

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


J'ai mis en place une démo jsfiddle pour la montrer en action et comment masquer éventuellement les autres onglets, car souvent lorsque je force par programmation, les onglets doivent obligatoirement être renseignés. avant de déverrouiller les autres onglets ...

Edit Voici le contenu du 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});
    }
  });
});
26
WebChemist

Si vous souhaitez recharger l'onglet par programme, je vous recommande d'utiliser l'utilitaire Jquery Tab API comme suit: Ceci active le premier onglet, puis active le deuxième onglet, assez simple et soulève également les événements qui seraient normalement déclenchés lorsque vous cliquez directement.

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

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

Vous pouvez aussi attraper un événement actif comme ci-dessous pour effectuer des opérations

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

plutôt que d'essayer de déclencher l'événement click lui-même (ce qui, à mon avis, n'est pas possible d'appeler un événement utilisateur par programme dans ce contexte), je vous suggère de déclencher la fonction à appeler lors d'un événement click, vous souhaiterez peut-être examiner triggerHandler

0
optimusprime619