Question

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

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

});