Jquery: document.body is null?

Teensweb

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
Hi everyone,
I have been really annoyed by this irritating bug with internet explorer and jquery.
So here's the story:
I have an html page with jquery (v 1.5) on it and as usual, everything works like charm in heavenly browsers like ff and chrome. But in IE, the problem is really strange! The page reports error onload and when I view the error window it says "document.body is null or not an object"
and some of my jquery pluggins fail to work correctly, furthermore, the error disappears when I refresh the page! I googled about this and found that similar bugs where reported by others but I could never actually find a solution
Here's my html for reference:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="Stylesheet" type="text/css" media="screen" href="Styles/Template.css">
<link rel="Stylesheet" type="text/css" media="screen" href="Styles/pluggins.css">
  <script type="text/javascript" src="inc/jquery.js"></script>
      <script type="text/javascript" src="inc/jquery.metadata.js"></script>
    <script type="text/javascript" src="inc/jquery-ui.min.js"></script>
  <script type="text/javascript" src="inc/lavalamp.js"></script>
  <script type="text/javascript">

$(function(){
      
      // some function
    });
  </script>

<title></title>
</head>
<body>
<div id="layout">
<div id="leftpane">
<div class="panetop"></div>
<div class="ext">
  </div>
<div class="panefoot"></div>
</div>
<div id="rightpane"style="right:0px">
<div class="panetop"></div>
<div class="ext">
  </div>
</div>
<div class="panefoot"></div>
</div>
<br>
<br>
</div>
</body>
</html>
 
Last edited:
lemon-tree

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
If you are executing the Javascript straight away in the "$(function()..." bit then the body tag may or may not exists, depending upon how far downloaded the page is. This is what is causing it to sometimes work and sometimes not, as loading it from the cache will mean the body element exists, but re-downloading the page may cause the code to execute before the body exists.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
$(function () {...}) is the same as $(document).ready(function () {...}), so the function won't execute until the DOM is ready.

The sample page (even when filled out) doesn't recreate the problem in IE8 (whether running in IE7, 8 or compatibility mode, or quirks or standards mode), and has extraneous elements. Please post a minimal sample case, properly indented.

For example, the following doesn't produce any error.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <script type="text/javascript" src="/script/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        document.body.appendChild(document.createTextNode('sample text'));
    });
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>
 
Last edited:
Teensweb

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
Alright, I short-listed the problem to one of my pluggins: mbcontainers. It happens only when I include this particular file and it happens even if I don't call any functions in the file. Again, the error vanishes when I refresh the page!
One more interesting news: it happens only when the mbContainer.js file is fetched from a local directory!
Here's my sample code ( Thanks for the guidelines, misson)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script type="text/javascript" src="inc/jquery.js"></script>
      <script type="text/javascript" src="inc/jquery.metadata.js"></script>
    <script type="text/javascript" src="inc/jquery-ui.min.js"></script>
  <script type="text/javascript" src="inc/mbContainer.js"></script>
  <script type="text/javascript">

$(function(){
      
      // some function
    });
  </script>
</head>
<body>
</body>
</html>
The above code gives me the said error in IE and works fine in ff and chrome. And furthermore, it now seems that the error vanishes even if jquery is fetched remotely instead of mbcontainers!
Repeat: The mbContainer.js should be fetched locally for the error to appear.!
I'm really annoyed by this bug just because of its nature. The error consoles in ff and chrome does not even give a warning and I can't seem to interpret anything out of IE error reports to even know where to start debugging, So I would greatly appreciate any help, thanx.
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Teensweb said:
it happens only when the mbContainer.js file is fetched from a local directory!
Click to expand...
Do you mean you're opening the HTML document as a local file, rather than via HTTP? What IE version are you testing?

The error still isn't reproducible. After saving the sample HTML to a file and downloading jQuery, mbContainerPlus and the necessary jQuery UI components to the appropriate folder and opening the page locally in IE8, there was no error. To make a self-contained example in this case, you'll need to create an archive of all the files, or post a link to a live page so it can be downloaded.
 
Last edited:
Teensweb

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
Yes, you got me right. But this is weird, what you did to reproduce the error exactly matches the situation that causes the error for me. I'm on IE8 too, under win7. I don't think this is gonna affect my website anyway as the error vanishes when the files are uploaded to an http server. But this really gives me the crap while trying to understand javascript and building cross-browser compatible designs... Are you on win 7 too?
 
You must log in or register to reply here.
Top