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?

Ribaudo

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.

Iced

The load event is applied to every tab, should I use that event and retrieve the selected tab inside it to apply the new code? Every tab has different DOM in it, such as tables or forms. – Ribaudo

I haven't used the event myself. See if you can get the tab loaded from either the event or ui parameter that is passed to the callback method. Unfortunately the documentation doesn't explain these parameters. Using the DOM of the tabs will work, but it's a "dirty" solution. – Iced

Following conventions, I'd imagine that event.target.id will be the id of the tab that has had content loaded into it. Use firebug and console.log to investigate :) – Disaffirm

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

});

Disaffirm

I am using a tab's method: $('#content').tabs( 'add' , 'tabs/editor.php' , data[i].nombre); – Ribaudo

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

Idiot

Answer 4

Another way to do this is by using ajaxComplete:

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

Buxton

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?');
});

Curiosa