How to wait for div to load before calling another function?

Question

<script>
var href;

    $(function(){
        $("a.load").click(function (e) { 
            e.preventDefault();
            href = this;

            // cover all bookmarks
            $("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black');
            $("."+($(this).attr("class"))).css('background-color', '#F5F5F5');

            // uncover chosen bookmark
            $("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white');
            $("#"+($(this).attr("id"))).css('background-color', 'white');

            $("#tempMain").load($(this).attr("href")); // load content to temp div

            setTimeout(function() {resizeDivs();}, 500); // synchronize size of #main and #rightColumn
        });

    });

    function resizeDivs() {
        var heightNew = $("#tempMain").css("height");
        $("#rightColumn").css('height',heightNew);
        $("#main").css('height',heightNew);
        // $('#main').load($(href).attr('href'));
        $("#main").html($("#tempMain").html()); // is faster than loading again
    }
</script>

I'm loading subpages to a selected div of my main page by a jQuery function. In order to synchronise main div's and right column's height I'm using jQuery's .css() method. I wanted that resizing to look smoothly, so I've resolved it to following steps:
1. Load content of a subpage to an invisible temp div.
2. Calculate the height of that temp div.
3. Change the height of main div and right column to the height of that temp div.
4. Load content of a subpage to main div.

However, I am aware that my current way of doing this is pretty lame because of using setTimeout() as an improvisation of waiting for content to load - I've tried using $(document).ready but with no luck. Using a global variable (var href) also doesn't seem lege artis, but passing this operator of $("a.load").click function by apply() didn't work either.

How to do it "the right" way?

possible duplicate of [How to wait until an element exists?](http://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists) — user2284570, Oct 12 '14 at 19:59

Zeev G · Answer 1 · 2017-06-08T21:06:17.117

with jquery

function waitForElement(elementPath, callBack){
  window.setTimeout(function(){
    if($(elementPath).length){
      callBack(elementPath, $(elementPath));
    }else{
      waitForElement(elementPath, callBack);
    }
  },500)
}

e.g. to use:

waitForElement("#myDiv",function(){
    console.log("done");
});

here is without jquery

function waitForElement(elementId, callBack){
  window.setTimeout(function(){
    var element = document.getElementById(elementId);
    if(element){
      callBack(elementId, element);
    }else{
      waitForElement(elementId, callBack);
    }
  },500)
}

e.g. to use:

waitForElement("yourId",function(){
    console.log("done");
});

This works on local files (file://), where jQuery's .load() callback does not. — Daggar, Jun 07 '17 at 15:45

score 5 · Accepted Answer · answered May 28 '13 at 12:01

5

Use load callback

$("#tempMain").load($(this).attr("href"),function(){
   resizeDivs();
   // do other stuff load is completed
});

answered May 28 '13 at 12:01

Adil Shaikh

44,509
17
89
111

1

This will not work on local files (file://) -- modern JS blocks local file href's for security reasons. – Daggar Jun 07 '17 at 15:52

score 2 · Answer 3 · answered May 28 '13 at 12:01

2

You can attach a callback in the jQuery load function :

$("#tempMain").load($(this).attr("href"), resizeDivs);

see : http://api.jquery.com/load/

answered May 28 '13 at 12:01

Samuel Caillerie

8,259
1
27
33

score 0 · Answer 4 · answered May 08 '21 at 10:00

a simple script that i use to check if a (dynamic) DIV is loaded:

var tid = setInterval(timer, 100);

function timer() {

     var elementExist = $('#DIV');

     if (elementExist.length == 1) {

           functionToLoad();
     }
}

function functionToLoad(){

  clearInterval(tid);

  // REST OF CODE

}

How to wait for div to load before calling another function?

4 Answers4

Linked