Loading JSON-encoded AJAX content into jQuery UI tabs

Posted by pocketfullofcheese on Stack Overflow See other posts from Stack Overflow or by pocketfullofcheese
Published on 2010-05-07T01:06:33Z Indexed on 2010/05/07 1:18 UTC
Read the original article Hit count: 522

Filed under:
|
|
|

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>

© Stack Overflow or respective owner

Related posts about JSON

Related posts about jQuery