使用jQuery UI选项卡(通过ajax加载)和表单数据发布

I am attempting to set up an interface that has a form containing filters about some jQuery UI Tabs. The tabs are loaded via ajax.

我正在尝试设置一个接口，该接口具有一个包含关于jQuery UI选项卡的过滤器的表单。标签是通过ajax加载的。

When I click on one of the tabs, I want the data from the form to be submitted to that tab.

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

I set up the ajaxOptions to grab the data from my form, serialize it, and POST it to the url. I have caching turned OFF, and I have caching for the ajaxOptions turned OFF.

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

This is the code I am using to set up the 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
});

When the tabs load, the data that is passed along is the data that was in the form when the page was first loaded even though I have changed the filters in the form.

当制表符加载时，传递的数据是第一次加载页面时表单中的数据，即使我更改了表单中的过滤器。

I have added the following to the above tab setup to verify the form data along the way:

我在上面的选项卡设置中添加了以下内容来验证表单数据:

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

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

In all 3 instances, the updated form data is alerted. However, when the data reaches my page, it is the original data not the new data.

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

It appears that something is being cached somewhere, but I have no clue where.

似乎某些东西正在某处缓存，但我不知道它在哪里。

Shouldn't the data be grabbed fresh from the form for each ajax page load? Why is it being cached? Is there some other way that I can override the data that is being posted when the tab content loads?

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

This is a huge blocker in my current project. If I can't resolve it soon, I will have to find some other solution other than the jQuery UI Tabs. I want to use them, but if this issue can't be resolved ...

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

Can anyone help???

谁能帮忙吗? ? ?

1 个解决方案

#1

I believe I have figured out the answer to my own question. I wanted to share in case others have run into this same situation.

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

Basically, I added an option that when a tab is selected, it gets the current form data and resets the ajaxOptions.

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

The code I am now using is:

我现在使用的代码是:

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

I hope this helps someone else out.

我希望这能帮助别人。

#1