using javascript setTimeout to see if div has loaded

Question

I'm loading remote data using dynamic script tags and JSON. the remote page that I'm displaying on my website has a div in it that I use to load content into.

The problem is the javascript functions do not see the div as the page loads because it is remote data. if I set a timeout of about 300 it usually works and my javascipt can see the div. But sometimes it takes longer and it breaks the javascript.

I'm tring this:

function load_content()
{
  if(document.getElementById('remote_div')==null)
  {
  setTimeout('load_content()', 300);
  }
  else
  {
  document.getElementById('remote_div').innerHTML = 'Content goes here'
  }
}

but it just doesn't seem to work... what is wrong with it?

Answer 1

You may want to do this using setInterval. Something like:

var intrval = setInterval( function(){
  if(document.getElementById('remote_div')) {
      load_content();
       clearInterval(intrval);
 }, 50);

function load_content() {
   //loading content here
}

This way you don't have to estimate the loading time. load_content is executed when div#remote_div can be found in the DOM tree.

Edited based on comments, forgot to assign the interval, so it wouldn't ever clear indeed.

Answer 2

Are you using iframe?

If so, try

document.getElementById('YOUR_IFRAME_ID').contentWindow.document.getElementById('remote_div')