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 j

Answer 1

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:

    


        

            
Tab 1
            
Tab 2
            
Tab 3
        

    

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.