Callback after ajax loading a tab

Question

How can I apply some code to the content of an ajax loaded tab? I tried using $(document).ready inside the loaded content, but that prevented css styles from loading (don't know why).

Is there a callback function? Should I use $(document).ready and styles inside the loaded document in some other way?

If using $(document).ready inside the loaded document is fine, should I also include references to jquery and its plugins in it?

Solution 1

Have you tried the load event? This should be called, when the contents of the tab have been loaded.

In general you shouldn't treat the loaded element as a new page and call the $(document).ready. This is not a new page, but some new elements added to the DOM. All ajax methods feature a callback method that is invoked, when the data are successfully loaded.

Solution 2

What code are you using to load the content through ajax? If you using a jQuery command like load or ajax then I would recommend putting your code inside the callback function. For example, using load

$('#myUITab').load('anotherPage.html', function() {

    // put the code you need to run when the load completes in here

});

Solution 3

jQuery UI "Tabs" provide callback method. Check out below!

$( "#tabs" ).tabs({
    ajaxOptions: {
        error: function( xhr, status, index, anchor ) {
            $( anchor.hash ).html(
                "error occured while ajax loading.");
        },
        success: function( xhr, status ) {
            //alert("ajax success. ");    //your code
        }
    }
});