Issue with jQuery UI Tabs (loaded via ajax) and form data - ajax

Question

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.
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.
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.
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?
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 ...
Can anyone help???

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