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

Question

我正在尝试设置一个界面，其中包含一个包含有关某些 jQuery UI 选项卡的过滤器的表单。选项卡通过 ajax 加载。

当我单击其中一个选项卡时，我希望将表单中的数据提交到该选项卡。

我设置了 ajaxOptions 以从表单中获取数据，将其序列化，然后将其 POST 到 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;
                    }
});

我希望这对其他人有帮助。