Question

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

当用户在标签之间导航时，我需要做的是维护服务器端的状态。

我已经研究过像

这样的东西

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

但是还没有找到隐藏标签的方法并发布它的表单内容。

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

感谢任何提示......

Answer 1

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

Answer 2

我喜欢Jer建议确定需要发布哪种表格。如果你仍然坚持如何发布表单，我会在这里查看jQuery（）。searlize（）方法，http://api.jquery.com/serialize/，并将它与jQuery（）。post（）方法结合起来。

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

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

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

});

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

3 个答案: