Onglets jQuery: Affichez l'onglet précédemment sélectionné lors de l'ouverture d'un nouvel onglet

Question

Ayant deux formulaires, chacun dans son propre onglet jQuery UI, comment puis-je poster le formulaire dans l'onglet désélectionné en cliquant sur un nouvel onglet?

Cela je dois faire pour maintenir l'état du côté du serveur lorsque l'utilisateur navigue entre les onglets.

J'ai regardé en quelque chose comme

$('#tab-container-id').bind('tabsselect', function(event, ui) { 
    ... 
}); 

mais ne l'ai pas trouvé un moyen d'accéder à l'onglet étant masqué et afficher son contenu du formulaire. Une façon de configurer ceci serait d'entourer tout l'ensemble d'onglets à l'intérieur d'un élément de formulaire qui serait soumis chaque fois qu'un onglet est sélectionné, mais je préfèrerais avoir un formulaire dans chaque onglet, chacun avec sa propre action (qui obtient lié à différents objets de commande Spring MVC).

Merci pour tout conseils ...

Answer 1

Merci - qui était le chemin à parcourir, pour maintenir une variable pour l'onglet actuellement ouvert, et voici ce que je l'ai fait:

jQuery(document).ready(function() { 

    var activePanel; 

    $('#tabs').bind('tabsload', function(event, ui) { 

     activePanel = $(ui.panel); // basically the answer :) 
    }); 

    $('#tabs').bind('tabsselect', function(event, ui) {  

     var formToSubmit = activePanel.find('form:first'); 

     // using http://docs.jquery.com/Plugins/Validation 
     var isValid = formToSubmit.valid(); 
     if(isValid) { 
      $.post(
       formToSubmit.attr('action'), 
       formToSubmit.serialize() 
      );  

      activePanel = $(ui.panel); 
     } 

     // another tab can't be opened unless the form in this one validates 
     return isValid; 
    }); 

}); 

Answer 2

Vous pouvez garder une variable qui connaît la forme id pour l'onglet ouvert. Ensuite, fournissez un événement click pour chaque onglet afin de publier le formulaire avec l'ID mis en cache.

Answer 3

J'aime la suggestion de Jer pour déterminer quel formulaire doit être affiché. Si vous êtes toujours bloqué sur la façon de publier le formulaire, je voudrais regarder dans la méthode jQuery(). Searlize() ici, http://api.jquery.com/serialize/, et le combiner avec la méthode jQuery(). Post().

Donc, pour un code psuedo ...

$('.tab').bind("click", function() { 
    var tabData = $(cachedFormElement).serialize(); 
    $.post('controllerUrl', tabData); 
});