JQuery вкладки: опубликовать ранее выбранную вкладку при открытии новой

Question

Имея две формы, каждая на собственной вкладке пользовательского интерфейса jQuery, как я могу опубликовать форму на невыбранной вкладке при нажатии на новую вкладку?

Это нужно сделать, чтобы поддерживать состояние на стороне сервера, когда пользователь перемещается между вкладками.

Я смотрел на что-то вроде

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

но не нашли способ добраться до скрытой вкладки и опубликовать ее содержимое.

Один из способов настроить это - заключить весь набор вкладок в элемент формы, который будет отправляться при выборе вкладки, но я бы предпочел, чтобы внутри каждой вкладки была форма, каждая со своим действием (которое связывается к различным объектам команд Spring MVC).

Спасибо за любые подсказки ...

Answer 1

Мне нравится предложение Джера определить, какую форму нужно публиковать. Если вы все еще не знаете, как разместить форму, я бы посмотрел здесь на метод jQuery (). Searlize (), http://api.jquery.com/serialize/, и совместил его с методом jQuery (). Post ().

Так что для некоторого кода псевдо ...

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

Answer 2

Вы можете сохранить переменную, которая знает идентификатор формы для текущей открытой вкладки. Затем предоставьте событие click для каждой вкладки, чтобы опубликовать форму с кэшированным идентификатором.

Answer 3

Спасибо - это был способ сохранить переменную для текущей открытой вкладки, и вот что я сделал:

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

});