Question

我正在尝试设置一个包含有关某些jQuery UI标签的过滤器的表单的界面。标签通过ajax加载。

当我点击其中一个标签时，我希望将表单中的数据提交到该标签。

我设置了ajaxOptions来从我的表单中获取数据，序列化它，并将其发布到url。我已将缓存关闭，并且我已将缓存ajaxOptions关闭。

这是我用来设置标签的代码。

$("#schedule-tabs").tabs({
ajaxOptions:    {
                    type:   'POST',
                    data:   $('#filters').serialize(),
                    cache:  false,
                    error:  function(xhr, status, index, anchor) {
                                $(anchor.hash).html("<p>An error has been encountered while attempting to load this tab.</p>");
                            }
                },
cache:          false
});

当加载选项卡时，传递的数据是首次加载页面时表单中的数据，即使我已更改表单中的过滤器。

我已将以下内容添加到上面的标签设置中以验证表单数据：

select: function(event, ui) {
        alert($('#filters').serialize());
    },
load:   function(event, ui){
            alert($('#filters').serialize());
        },

show:   function(event, ui){
            alert($('#filters').serialize());
        }

在所有3个实例中，都会提醒更新的表单数据。但是，当数据到达我的页面时，它是原始数据而不是新数据。

看来有些东西正在某处缓存，但我不知道在哪里。

对于每个ajax页面加载，不应该从表单中获取新数据吗？为什么要缓存？是否有其他方法可以覆盖选项卡内容加载时发布的数据？

这是我目前项目中的一个巨大障碍。如果我不能很快解决它，我将不得不找到除jQuery UI选项卡之外的其他解决方案。我想使用它们，但是如果这个问题无法解决......

任何人都可以帮忙???

Answer 1

我相信我已经找到了自己问题的答案。我想分享以防其他人遇到同样的情况。

基本上，我添加了一个选项，当选择一个选项卡时，它会获取当前的表单数据并重置ajaxOptions。

我现在使用的代码是：

// set up the jQuery UI Tabs
var $tabs = $("#schedule-tabs").tabs({
    ajaxOptions:    {
                        type:   'POST',
                        data:   $('#filters').serialize(),
                        cache:  false,
                        error:  function(xhr, status, index, anchor) {
                                    $(anchor.hash).html("<p>An error has been encountered while attempting to load this tab.</p>");
                                }
                    },
    cache:          false,
    select:         function(event, ui) {
                        // get the current form data
                        var filter_options = $('#filters').serialize();
                        // update the data for the ajax options
                        $(this).tabs('option', 'ajaxOptions', { type: 'POST', 'data': filter_options });
                        return true;
                    }
});

我希望这可以帮助其他人。

jQuery UI选项卡（通过ajax加载）和表单数据的问题

1 个答案: