jQuery tabs: Post previously selected tab when opening a new one

Question

Hi

Having two forms, each in it's own jQuery UI tab, how can I post the form in the deselected tab when clicking a new tab?

This I need to do to maintain state at the server side when the user navigates between tabs.

I have looked into something like

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

but haven't found a way to get to the tab being hidden and post it's form contents.

One way to set this up would be to enclose the whole tab set inside a form element that would be submitted whenever a tab is selected but I would rather have a form inside each tab, each with it's own action (that gets bound to different Spring MVC command objects).

Thanks for any hints...

Answer 1

You could keep a variable which knows the form id for the currently open tab. Then provide a click event for each tab to post the form with the cached id.

Answer 2

I like Jer's suggestion for determining which form needs to be posted. If you are still stuck on how to post the form though I would look into the jQuery().searlize() method here, http://api.jquery.com/serialize/, and combine it with the jQuery().post() method.

So for some psuedo code...

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

Answer 3

Thanks - that was the way to go, to keep a variable for the currently open tab, and this is what I did:

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

});