jQuery选项卡：打开新选项卡时发布先前选择的选项卡答案

【问题标题】：jQuery tabs: Post previously selected tab when opening a new onejQuery选项卡：打开新选项卡时发布先前选择的选项卡
【发布时间】：2010-03-31 17:26:35
【问题描述】：

有两个表单，每个表单都在自己的 jQuery UI 选项卡中，如何在单击新选项卡时将表单发布到取消选择的选项卡中？

当用户在选项卡之间导航时，我需要这样做以维护服务器端的状态。

我研究过类似的东西

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

但还没有找到一种方法来访问被隐藏的选项卡并发布它的表单内容。

设置它的一种方法是将整个选项卡集包含在一个表单元素中，只要选择一个选项卡就会提交该元素，但我宁愿在每个选项卡内都有一个表单，每个选项卡都有自己的操作（被绑定到不同的 Spring MVC 命令对象）。

感谢您的任何提示...

【问题讨论】：

标签： jquery user-interface spring-mvc tabs form-submit

【解决方案1】：

我喜欢 Jer 关于确定需要发布哪种表格的建议。如果您仍然坚持如何发布表单，尽管我会在这里查看 jQuery().searlize() 方法 http://api.jquery.com/serialize/，并将其与 jQuery().post() 方法结合使用。

所以对于一些伪代码...

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

【讨论】：

【解决方案2】：

您可以保留一个变量，该变量知道当前打开的选项卡的表单 ID。然后为每个选项卡提供一个点击事件，以使用缓存的 id 发布表单。

【讨论】：

【解决方案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;
    });

});

【讨论】：