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?

Answer 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.

Answer 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

});

Answer 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
        }
    }
});

Answer 4

Another way to do this is by using ajaxComplete:

$("#loading_comtainer").ajaxComplete(function( event,request, settings ){
   alert("ajaxCompleted");
});

Answer 5

You can use the tabsload event http://jqueryui.com/demos/tabs/#event-load

See how it can work in the example below:

$('#nav_tabs').tabs({
    select: function(event, ui){
        var url = $.data(ui.tab, 'load.tabs');
        if (url == '?ak=/account/logout') { 
            //exclude the logout from using ajax
            location.href = url;
            return false;
        }
        return true;
    },
}).bind('tabsload',function(event, ui){
    alert('The tab is loaded. What now?');
});