Posting jQuery ajaxoptions tabbed data

Question

I use the following code to initialize my tabs

$('#tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast' }, select: function () { $(this).tabs("option", { ajaxOptions: { data: vehicleJson } }); }, ajaxOptions: { type: 'post', success: function(){ alert('onSuccess'); }, error: function(){ alert('onFail'); } }, spinner: '' } 

In my controller, I:

 [HttpPost] public PartialViewResult Intervals(string vehicleJson) { return PartialView("_Intervals"); } 

If I remove the [HttpPost] attribute, it seems to be working fine, except that this is not the “message” I need. Basically I am trying to pass a json object before a message. What am I doing wrong? Here is the source HTML for my tabs

 <ul id="ul-tabs"> <li><a href="/maintenance/Tabs/Intervals" title="Intervals">Intervals</a></li> <li><a href="/maintenance/Tabs/Lifetime" title="Lifetime Services">Lifetime Services</a></li> <li><a href="/maintenance/Tabs/Locator" title="Locator">Locator</a></li> <li><a href="/maintenance/Tabs/Procedures" title="Procedures">Procedures</a></li> <li><a href="/maintenance/Tabs/Specifications" title="Specifications">Specifications</a></li> <li><a href="/maintenance/Tabs/Reset" title="Reset">Reset</a></li> </ul> 

How to get links to make a message, rather than receive? I want to use server side javascript data.

Thanks for the tips or advice,
Cheers
~ ck in San Diego

Answer 1

You rewrite the ajaxOptions tab in the tab.

This line:

 $(this).tabs("option", { ajaxOptions: {data: vehicleJson}}); 

Overwrites previously set parameters and forces the tabs to use jQuery ajax defaults (type = "GET").

You can fix it as follows:

 var tabAjaxOpts = { type:'post', success:function(){alert('onSuccess');}, error:function(){alert('onFail');} }; $('#tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast' }, select: function () { tabAjaxOpts.data = vehicleJson; $(this).tabs("option", { ajaxOptions: tabAjaxOpts}); }, ajaxOptions: tabAjaxOpts };