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

发布于 2024-08-28 00:22:53 字数 393 浏览 6 评论 0原文

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

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

我已经研究过类似的问题

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

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

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

感谢您的任何提示...

原文

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...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世态炎凉 2024-09-04 00:22:53

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

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

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

I like Jer's suggestion for determining which form needs to be posted. If you are still stuck on how to post the form though I would look into the jQuery().searlize() method here, http://api.jquery.com/serialize/, and combine it with the jQuery().post() method.

So for some psuedo code...

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

回复收藏 0 原文

各空 2024-09-04 00:22:53

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

回复收藏 0 原文

メ斷腸人バ 2024-09-04 00:22:53

谢谢 - 这就是要走的路，为当前打开的选项卡保留一个变量，这就是我所做的：

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

});

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

});

回复收藏 0 原文

~没有更多了~