Question

I am trying to load an external html into the div using jQuery.load() method.
I call this method from document.ready().

html.1

    <script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='js/script1.js'></script>
...

script1.js

$(document).ready(function() {
        $('div.dropzone').load('drawings.html');
});

The file is loaded, but is not shown till I press F5 (refresh), and sometimes even ctrl F5, some times (3-5). If I will not press F5 , the page will be never shown, however with some F5 presses the page is always shown.

The HTML that is loaded into div does lots of canvas drawing in its window.onload.

drawings.html

<script>
var init = function() {
   var container = document.getElementById('MyCanvas');
   var canvas = document.createElement('canvas');
   canvas.width = container.clientWidth;
   canvas.height = 1000;
   container.appendChild(canvas);
   return canvas;
}

window.onload = function()
{
   var canvas = init();
   var context = canvas.getContext('2d');
   context.beginPath();
   //... lots of drawings here
   context.closePath();
};

</script>
...
<div id='MyCanvas'>
</div>

When I remove this canvas thing and place some static HTML instead, it is shown without any problem.

Can somebody shed a light on what is going on here?

Answer 1

Try changing window.onload to a named function, and call that function in the callback to load. Something like this:

$(document).ready(function() {
   $('div.dropzone').load('drawings.html', function() {
      doMyNewNamedFunction();
    }
});