Les onglets jQuery : Afficher 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 afficher le formulaire dans l'onglet désélectionné lorsque je clique sur un nouvel onglet ?

Je dois le faire pour maintenir l'état du serveur lorsque l'utilisateur navigue entre les onglets.

J'ai envisagé quelque chose comme

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

mais je n'ai pas trouvé le moyen d'accéder à l'onglet masqué et d'afficher le contenu du formulaire.

Une façon de procéder serait d'enfermer l'ensemble des onglets dans 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 est liée à différents objets de commande Spring MVC).

Merci pour tout conseil...

Answer 1

Vous pourriez conserver une variable qui connaît l'identifiant du formulaire pour l'onglet actuellement ouvert. Vous pourriez ensuite prévoir un événement de clic pour chaque onglet afin d'afficher le formulaire avec l'identifiant mis en cache.

Answer 2

J'aime la suggestion de Jer pour déterminer quel formulaire doit être affiché. Si vous ne savez toujours pas comment afficher le formulaire, je vous conseille d'utiliser la méthode jQuery().searlize(), http://api.jquery.com/serialize/ et combinez-le avec la méthode jQuery().post().

Donc, pour un certain code psuedo...

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

Answer 3

Merci - c'était la solution pour conserver une variable pour l'onglet actuellement ouvert, et c'est ce que j'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;
    });

});