Run ready function on a page that is pulled in via AJAX

Question

When I call in a page via ajax that has a ready funtion on it, I can only get it to work using this method:

$('div#tab1').empty().html('<img src="Loading.gif">');
$.ajax({
  url: "external.html",
  cache: false,
  success: function(html){
  setTimeout(function(){$('div#tab1').load('external.html')}, 2000);
  }
});

The problem is that this is on the 2nd tab of a tabset so if someone doesn't click on the 2nd tab before it times out it the ready function doesn't fire. If I remove the setTimeout and loading.gif and just use the plain ajax call it doesn't fire the ready funtion either. The only way I've been able to get it to work is to use the setTimeout.

Any suggestions? Thanks.

Answer 1

Do you realize that your "ajax" call doesn't ever use the data the AJAX returns? You should be able to replace all of that with

$('div#tab1').empty().html('<img src="Loading.gif">');
$('div#tab1').load('external.html');

If you're worried about caching, add a timestamp to the end of the load argument.

The document ready should fire when the data is successfully written to the DOM. Ergo, your ajax should look like this:

$('div#tab1').empty().html('<img src="Loading.gif">');
$.ajax({
  url: "external.html",
  cache: false,
  success: function(html){
  $('div#tab1').html( html );
  }
});