How to call a function after a div is ready?

Question

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({

});

I would imagine that `jQuery(divId)` never finds anything, you're missing the ID selector `#` — tymeJV, Jun 12 '13 at 17:33
the ready event fires only when the DOM is fully loaded...per jQuery API Docs — fnostro, Jun 12 '13 at 17:35

Matthew Blancarte · Accepted Answer · 2023-03-22T03:16:03.540

40

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. :)

edited Mar 22 '23 at 03:16

answered Jun 12 '13 at 17:42

Matthew Blancarte

8,251
2
25
34

I am loading five pages on iframe on by one, one of them the page is the google map geocode, i am calling a function on window onload to geocode the address but that funtion fire when first page load in the iframe, i tried the document.ready,wind.load,if($(div).is(:visible)) but every thing fires on first page load on the iframe, the googlemap is on number three when we click next 3 times then googlemap turn come!! – – Abdul Muheet Oct 10 '15 at 07:48
Hey @Mohit, I think it would be best for you to really lay out your code in a new question. Too hard to follow in comment context. If you link your new question here, I will follow it and see if I can help. :) – Matthew Blancarte Oct 10 '15 at 19:07

jAndy · Answer 2 · 2013-06-12T17:41:56.687

Thus far, the only way to "listen" on DOM events, like inserting or modifying Elements, was to use the such called Mutation Events. For instance

document.body.addEventListener('DOMNodeInserted', function( event ) {
    console.log('whoot! a new Element was inserted, see my event object for details!');
}, false);

Further reading on that: MDN

The syntax at present looks like

var observer = new MutationObserver(function( mutations ) {
    mutations.forEach(function( mutation ) {
         console.log( mutation.type );
    }); 
});

var config = { childList: true };

observer.observe( document.body, config );

At this time, the API has been implemented in newer Firefox, Chrome and Safari versions. I'm not sure about IE and Opera. So the tradeoff here is definitely that you can only target for topnotch browsers.

i really feel like more people should be using this, especially important when it comes to ajax calls — Craig Wayne, Jul 07 '14 at 13:01
As of 2018, should we handle this situation with js Promises? Or is it impossible with DOM nodes? — Juozas Rastenis, Sep 17 '18 at 09:07

score 4 · Answer 3 · answered Jan 10 '18 at 14:15

To do something after certain div load from function .load(). I think this exactly what you need:

  $('#divIDer').load(document.URL +  ' #divIDer',function() {

       // call here what you want .....


       //example
       $('#mydata').show();
  });

score 1 · Answer 4 · answered Jun 12 '13 at 17:37

Through jQuery.ready function you can specify function that's executed when DOM is loaded. Whole DOM, not any div you want.

So, you should use ready in a bit different way

$.ready(function() {
    createGrid();
});

This is in case when you dont use AJAX to load your div

score 1 · Answer 5 · answered Jun 09 '16 at 09:07

1

inside your <div></div> element you can call the $(document).ready(function(){}); execute a command, something like

<div id="div1">
    <script>
        $(document).ready(function(){
         //do something
        });
    </script>
</div>

and you can do the same to other divs that you have. this was suitable if you loading your div via partial view

answered Jun 09 '16 at 09:07

dr.Crow

1,493
14
17

That's a righteous hack. I think you voided the warranty. I'm using this. – J E Carter II Feb 09 '18 at 13:13
As far as I know this would load the DOM (and load the script with it) but then still only executes when the full page is ready because you put it in `$(document).ready()`. Remove that and it'll work, but I'm assuming this is not a solution Grammin can use. – s1h4d0w Jan 10 '19 at 12:17

How to call a function after a div is ready?

5 Answers5

Linked