Question

189

How to call a function after a div is ready?

rated 0 times [ 192] [ 3] / answers: 1 / hits: 118503 / 11 Years ago, wed, june 12, 2013, 12:00:00

I have the following in my javascript file:

var divId = divIDer;



jQuery(divId).ready(function() {

  createGrid();  //Adds a grid to the html

});

The html looks something like:

<div id=divIDer><div>

But sometimes my createGrid() function gets called before my divIder is actually loaded onto the page. So then when I try to render my grid it can't find the proper div to point to and doesn't ever render. How can I call a function after my div is completely ready to be used?

Edit:

I'm loading in the div using Extjs:

var tpl = new Ext.XTemplate(

'<div id={divId}></div>');



tpl.apply({



});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

asalewisc

Add To Favorites

Follow

Total Points: 742

Total Questions: 98

Total Answers: 112

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

answered 11 Years ago yvettel · Accepted Answer

You can use recursion here to do this. For example:

jQuery(document).ready(checkContainer);



function checkContainer () {

  if ($('#divIDer').is(':visible')) { //if the container is visible on the page

    createGrid(); //Adds a grid to the html

  } else {

    setTimeout(checkContainer, 50); //wait 50 ms, then try again

  }

}

Basically, this function will check to make sure that the element exists and is visible. If it is, it will run your createGrid() function. If not, it will wait 50ms and try again.

Note:: Ideally, you would just use the callback function of your AJAX call to know when the container was appended, but this is a brute force, standalone approach. :)