jQuery UI 1.10 Tabs - Dynamically load User Control

The jQuery UI version 1.10 is not clear for how to use the Tabs control. They have deprecated a lot of functionality, and introduced others. Because of that, there isn't a lot of help out there thus far for how to use the new 1.10 version. Specifically, how do you dynamically load a user control using the tabs? 

You have to set some ajax settings in the beforeLoad section. There is a VERY little known bug when setting the ui.ajaxSettings. You have to use the ui.jqXHR.setRequestHeader for setting the content type of the request. See Below:

$("#MainContent_contentArea").tabs({
    activate: function (event, ui) {if (ui.newPanel.is(':empty')) {
            ui.newPanel.append("<div class='tab-loading'>...Loading...<br /><img src='Images/ajax-loader.gif' /></div>");
        };
    }
    , show: {
        efect: 'slideDown',
        duration: 500
    }
    , beforeLoad: function (event, ui) {
        alert('beforeLoad');
        ui.ajaxSettings.accepts = { json: "application/json, text/javascript" };
        ui.ajaxSettings.contentType = "application/json; charset=utf-8";
        ui.ajaxSettings.type = "POST";
        ui.ajaxSettings.dataTypes[0] = "json";

        ui.jqXHR.setRequestHeader("Content-Type", ui.ajaxSettings.contentType);

        ui.jqXHR.error(function (data) { alert('error'); alert(data.status + ' - ' + data.statusText) });
        ui.jqXHR.success(function (data) { alert('success'); alert(data) });
    }
});