jQuery加载功能页面加载问题

Question

I have a main.html in which I am trying to load another HTML. The code in main.html is like this:

<script type="text/javascript">
$(window).load(function(){
    $("#divid").load("sample.html");
});
</script>

Inside the sample.html, I have another JavaScript which doesn't work as expected.

<!-- inside sample.html -->
<script type="text/javascript">
... Some JavaScript here ...
</script>

I do not even get the width of an element correctly. Surprisingly, if I put a breakpoint in the JavaScript or put an alert, all seem to work well. This made me guess that page might not be loaded when script runs and by putting alert or breakpoint gives it a bit more time ? I did some searching on web and think that the loading is not in sync which means that the script inside the sample.html page is executing before the page could load. This is just my guess. I have tried adding JQuery functions ready and load inside the sample.html as well but nothing changes. Any idea what could be wrong here ?

Answer 1

Use the callback...

this is an example from the doku

    $( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

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

and also use jQuery's

$( document ).ready(function() {
    console.log( "ready!" );
});

Document ready fires the callback, when the dom is ready. And load fires the callback when the file is loaded.

//EDIT Please use document ready... here are more details... and also do not load files directly from the file system

$(document).ready(function(){
  // You will enter here, wenn the DOM is loaded and ready to use

  //When everything is ready to roll you want to  load your html file
   $("#divid").load("sample.html",function(){
     // You will enter this method when sample.html is loaded

     // Make sure there is also a div with the id=divid 
     // to get details on why this is not loading you can also use the
     // function signature  
     // $("#divid").load("sample.html",function(responseText, textStatus, jqXHR){});
     // You should also be aware of loading a file from file system can cause to ajax 
     // errors if it is not served by an http server. Because you can't access local
     // files from within JavaScript (security thing) 
   });


}