[jQuery UI Tabs] 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

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 2

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 3

http://groups.google.com/group/jquery-en/browse_thread/thread/c91b9740756e0cdd/3cb7ac3ad693ddac?show_docid=3cb7ac3ad693ddac

Answer 4

Another way to do this is by using ajaxComplete:

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