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


i attempting set interface has form containing filters jquery ui tabs. tabs loaded via ajax.

when click on 1 of tabs, want data form submitted tab.

i set ajaxoptions grab data form, serialize it, , post url. have caching turned off, , have caching ajaxoptions turned off.

this code using set 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 load tab.</p>");                             }                 }, cache:          false }); 

when tabs load, data passed along data in form when page first loaded though have changed filters in form.

i have added following above tab setup verify form data along way:

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

in 3 instances, updated form data alerted. however, when data reaches page, original data not new data.

it appears being cached somewhere, have no clue where.

shouldn't data grabbed fresh form each ajax page load? why being cached? there other way can override data being posted when tab content loads?

this huge blocker in current project. if can't resolve soon, have find other solution other jquery ui tabs. want use them, if issue can't resolved ...

can help???

i believe have figured out answer own question. wanted share in case others have run same situation.

basically, added option when tab selected, gets current form data , resets ajaxoptions.

the code using is:

// set 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 load tab.</p>");                                 }                     },     cache:          false,     select:         function(event, ui) {                         // current form data                         var filter_options = $('#filters').serialize();                         // update data ajax options                         $(this).tabs('option', 'ajaxoptions', { type: 'post', 'data': filter_options });                         return true;                     } }); 

i hope helps else out.


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -