Loading JSON-encoded AJAX content into jQuery UI tabs
- by pocketfullofcheese
We want our of our AJAX calls in our web app to receive JSON-encoded content. In most places this is already done (e.g. in modals) and works fine.
However, when using jQueryUI's tabs (http://jqueryui.com/demos/tabs/) and their ajax functionality, only plaintext HTML can be returned (i.e. from the URLs specified in the a tags below). How do I get the tab function to recognize that on each tab's click, it will be receiving JSON-encoded data from the specified URL, and to load in the .content index of that JSON?
$(function() {
$('div#myTabs').tabs();
});
<div id="mytabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top"><a href="/url/one">Tab one</a></li>
<li class="ui-state-default ui-corner-top"><a href="/url/two">Tab two</a></li>
</ul>
</div>
