$(document).ready() executes before it is ready?

Question

consider a simplified version of what I'm running:

<html>
   <head>
      <script src="data.js"></script>
      <script src="content.js"></script>
   </head>
   <body>
      <div id="contentGoesHere"></div>
   </body>
</html>

There is obviously much more to this, but this is the basic jist. Within content.js, I have several functions that load markup into my div based on json data included in the data.js. In addition to these functions is the following line:

$(document).ready(function()
{
    loadContent();
});

for all intents and purposes, load content is loading just fine, but within that code is a call to perform a jquery .show() of the first div among several divs that get loaded in after they all get appended to the container element. That code doesn't executing, almost as if the divs don't yet exist. So I tried late loading:

<html>
   <head>
      <script src="data.js"></script>
   </head>
   <body>
      <div id="contentGoesHere"></div>
   </body>
   <script src="content.js"></script>
</html>

sure enough, both result in the first panel being displayed. Why would late loading the file that has the $(document).ready() function in it make a difference if .ready() is supposed to wait until the DOM is loaded anyway?

You are appending extra DOM elements with Javascript after the DOM is ready. `$(document).ready()` fires after the initial DOM is loaded. That means what is sent in the initial request. It doesn't know about your dynamic appends in an external JS. — crush, Sep 10 '13 at 18:46
Furthermore, scripts included in the `` section get loaded synchronously before the `` section gets loaded. — crush, Sep 10 '13 at 18:47
right, I understand that. So, in .ready(), I append a couple "panels" with content in them, then I call $("#panel_0").show(). If I alert before the .show() nothing shows, not even the html. So interrupting the .ready() function with an alert shows that none of the html is displayed yet either. — AceCorban, Sep 10 '13 at 18:50
Ok, so the scripts in the head part is interesting. I'd appreciate a resource to read more on that. — AceCorban, Sep 10 '13 at 18:51
There are numerous SO Q&A's on the topic: [1](http://stackoverflow.com/questions/496646/how-does-the-location-of-a-script-tag-in-a-page-affect-a-javascript-function-tha), [2](http://stackoverflow.com/questions/3531314/should-i-write-script-in-the-body-or-the-head-of-the-html), [3](http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body). Most of them talk about performance, but it is also interesting to note they are synchronous if placed in the head. — crush, Sep 10 '13 at 18:56
There's a lot of moving parts to create a fiddle. Needless to say, late-loading seems to solve the issue, and now I at least understand why. I learned something today. Thanks crush. Feel free to submit as answer so I can mark it. — AceCorban, Sep 10 '13 at 19:09

score 6 · Accepted Answer · edited Sep 30 '14 at 07:10

6

You are appending extra DOM elements with Javascript after the DOM is ready. $(document).ready() fires after the initial DOM is loaded. That means what is sent in the initial request. It doesn't know about your dynamic appends in an external Javascript.

Furthermore, scripts included in the <head> section get loaded synchronously before the <body> section gets loaded.

edited Sep 30 '14 at 07:10

Jollywatt

1,382
2
12
31

answered Sep 10 '13 at 19:13

crush

16,713
9
59
100

Thanks. The first part was irrelevant to my problem, as I was aware of that, but the synchronous loading solved my problem. – AceCorban Sep 10 '13 at 20:25

score 0 · Answer 2 · answered Sep 10 '13 at 18:48

0

Try to wait for the entire document is ready, more or less like this:

$(window).load(function() {
  //code
});

answered Sep 10 '13 at 18:48

rflmyk

569
6
13

Thanks for the suggestion, but that didn't resolve it. I think Crush might be on to something – AceCorban Sep 10 '13 at 18:55

$(document).ready() executes before it is ready?

2 Answers2