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

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

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.
  1. $("#schedule-tabs").tabs({
  2.     ajaxOptions:    {
  3.                         type:   'POST',
  4.                         data:   $('#filters').serialize(),
  5.                         cache:  false,
  6.                         error:  function(xhr, status, index, anchor) {
  7.                                     $(anchor.hash).html("<p>An error has been encountered while attempting to load this tab.</p>");
  8.                                 }
  9.                     },
  10.     cache:          false
  11. });
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:

  1. select: function(event, ui) {
  2.             alert($('#filters').serialize());
  3.         },
  4. load:   function(event, ui){
  5.             alert($('#filters').serialize());
  6.         },
  7. show:   function(event, ui){
  8.             alert($('#filters').serialize());
  9.         }

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