JQuery UI tabs: how to send ajax request with data from a message?

Question

From the jQuery UI tab :

<script> $(function() { $( "#tabs" ).tabs({ ajaxOptions: { error: function( xhr, status, index, anchor ) { $( anchor.hash ).html("Couldn't load this tab."); } } }); }); </script> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo.</p> </div> 

How to send an ajax request with post data in this case (possibly via ajaxOptions).

I do not know how to modify the tab URLs to send mail data, for example:

 <li><a href="ajax/content1.html(country:1,city:35)">Tab 1</a></li> <li><a href="ajax/content2.html(code:'aa')">Tab 1</a></li> 

Thanks!

EDITED

In jQuery, this is:

 $.load("some_url",{country: countryValue}); 

So I have a heading (country) and a post value (countryValue). How to do the same with each tab?

Answer 1

To make the AJAX POST method, you can add a type object to the ajaxOptions object. To collect data for the message, you can use jQuery.data() and then hide the POST parameters in the anchor.

 <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html" data-country="1" data-city="35">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo.</p> </div> 

And JavaScript:

 var postData = {}; $("#tabs").tabs({ select: function(event, ui) { postData = { country: parseInt($(ui.tab).data('country')), city: parseInt($(ui.tab).data('city')); }; }, ajaxOptions: { type: 'POST', data: postData, error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); } } }); 

Try it: JSFiddle

If your parameters change for each link, you will have to find a way to find out which parameters you are looking for. You can get the tab index in the select() event using ui.index and use switch to get different parameters for each case. Admittedly, this solution is not very pretty, but it can work.