Вкладки jQuery: публикация ранее выбранной вкладки при открытии новой

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

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

Я изучал что-то вроде

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

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

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

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


user-interface spring-mvc jquery tabs form-submit
person Bjorn Thor Jonsson    schedule 31.03.2010    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

Итак, для некоторого псевдокода ...

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

arrow_upward
2
arrow_downward

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

person Jeremy    schedule 31.03.2010

arrow_upward
0
arrow_downward

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

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

});
person Bjorn Thor Jonsson    schedule 20.04.2010