Loading JSON-encoded AJAX content into jQuery UI tabs

Question

We want all 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>

Answer 1

You can use the dataFilter option of the ajax call to convert your json response to the html you want to be inserted in to the panel of the tab.

Something like this:

$('#mytabs').tabs({
    ajaxOptions: {
        dataFilter: function(result){
            var data = $.parseJSON(result);
            return data.myhtml;
        }
    },
}); 

If you JSON response looked like this:

{"myhtml":"<h1>hello<\/h1>"}

Answer 2

I had to add:

this.dataTypes=['html']

to get this to work.

In context:

      ,ajaxOptions: {
    dataFilter: function(result,type){
      var data = $.parseJSON(result);
       // Trick jquery to think that it's html
       this.dataTypes=['html']
       return '<p>'+data.credential.id+'</p>';
    }
    ,error: function( xhr, status, index, anchor ) {
      $( anchor.hash ).html( i18n.AJAXError + ' (' + status + ')' );
    }
  }

Answer 3

I got stuck with this problem recently, so just in case someone has been looking for help with this kind of issue more recently, I thought it would be useful to re-open this discussion. I'm working with jQuery 1.8.2 and jQuery UI 1.9.2. I found the best way to do this with the latest version of jQuery UI was to return false from the beforeLoad event handler and send a getJSON request with the URL specified in the relevant tab.

HTML markup:

    <div id="tabs">

        <ul>
            <li><a href="/json/tab1.json">Tab 1</a></li>
            <li><a href="/json/tab2.json">Tab 2</a></li>
            <li><a href="/json/tab3.json">Tab 3</a></li>
        </ul>

    <div>

Tabs invocation code:

    $(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                var url = ui.ajaxSettings.url;
                $.getJSON(url, function (data) {
                    ui.panel.html(data.text);
                });
                return false;
            }
        });
    });

When the beforeLoad handler returns false, the normal functionality of displaying the HTML retrieved from the URL defined in the tab is disabled. However, you still have access to the event and ui objects passed to the beforeLoad handler. You get the URL from the tab with this syntax ui.ajaxSettings.url and then display the data returned by the getJSON request as shown in the Content via Ajax example:

ui.panel.html(data.text);

In my case, it's data.text because the JSON I'm retrieving contains two properties header and text.