jQuery AJAX Tabs post load process

Question

Situation

I have a page which makes use of tabs. Some of the tabs make use of the AJAX feature to load their content. However, the response I return from the server is not strictly the HTML to be displayed.

To instantiate the tabs, I use the following and if possible would like to keep the processing as located in the code below due to the fact this is just one part of a very big frontend which automatically creates a set of hooks:

objElement.tabs({
    heightStyle : "auto",
    show : {
        effect : "fade",
        duration : 400
    },
    hide : {
        effect : "fade",
        duration : 400
    },
    load: function( event, ui) {
        /* ### Processing here ###
        * Would like to be able to pass the response to a "postrequestprocedure"
        * function
        */
    });
}

jQuery tabs throws the data straight in to the tab. I know that I can use the load event to do some post processing. Here is an example of the server response, it is a JSON object which does get displayed as shown below with newline tags. I've left them out for legibility.

{
    "content" : 
        "<span><ul><li>list item</li></ul><p>Some example HTML</p></span>",
    "script":[
        "a.script",
        "b.script"
    ],
    "title":
        "User Login",
    "css": {
        "dev.min":"screen"
    }
}

Problem

• The ajax properties are only partly exposed through the $tabs({load: function(event,ui)}); interface; I cannot get access to the relevant operations/parameters this way.

• When it comes time to collecting the response; if I use html(), it will return the closing tags for some HTML not part of the response. To be precise, I have accounted for the HTML in my response and these extra tags are not it:

• If I use text() to collect the contents, any opening HTML tags are stripped out

Question

How can I get the response without it appearing "fiddled" with in order to parse it as a JSON object.

Possibility

Zahid has highlighted I can overwrite the default ajax behaviour with regard to tabs. I am happy to do this if it means, I can automatically detect the conditions where such an override applies

Kind regards

Answer 1

For anyone having the same issue as me, I have figured it out without the need to perform any overrides or such like.

Quite simply, since the API change, the undocumented way to get the response is as follows:

$().tabs({
    beforeLoad: function(event, ui) {
        ui.jqXHR.done(function(response) {
            console.log(response);
        });
    }
});