JavaScript Parsing – Comparing IE and Chrome Strictness

browserchromefirefoxinternet explorerjquery

This is not meant to start a religio-technical browser war – I still prefer Chrome, at least for now, but:

Because of a perhaps Chrome-related problem with my web page (see also), I temporarily switched to IE (10) to see if it would also view the time value as invalid.

However, I didn't even get to that point – IE stopped me in my tracks before I could get there; but I found that IE was right – it is more particular/precise in validating my code. For example, I got this from IE:

SCRIPT5007: The value of the property '$' is null or undefined, not a Function object

…which was referring to this:

<script src="/CommonLogin/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // body sometimes becomes white???? with jquery 1.6.1
    $("body").css("background-color", "#405DA7");
<

This line is highlighted as the culprit:

$("body").css("background-color", "#405DA7");

jQuery is referenced right above it – so why did it consider $ to be undefined, especially when Chrome had no problem with it…ah! I looked at that location (/CommonLogin/Scripts/) and saw that, sure enough, the version of jQuery there was actually jquery-1.6.2.min.js. I added the updated jQuery file (1.9.1) and it got past this.

So now the question is: why does Chrome ignore this? Does it download the referenced version from its own CDN if it can't find it in the place you specify?

IE did flag other errs after that, too; so I'm thinking perhaps IE is better at catching lurking problems than, at least, Chrome is. Haven't tested Firefox diesbzg yet.

Best Answer

You were using an old version of jquery, as you admitted. The browser detection in that version was broken and so didn't define the global '$' jquery object. So when you tried to use it, it was not defined. You could put the non minified version of the js (the file without the 'min' part) and see where the $ is getting defined (or not getting defined).

Now getting onto Phil's answer, it's right but for the wrong reasons. He is saying you need to wait until dom ready by going $(document).ready. The only reason you need to do that is because you have your javascript in the head. Move it all to the bottom (which is better for speed, dom parsing). So you should have this as it will perform better.

<html>
<head>
<title>Test</title>
</head>
<body>
    <p>Test</p>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">
        // no need to wait for ready since we are AFTER the body
        $("body").css("background-color", "#405DA7");

</body>
</html>

Other problems could be that the jquery file itself was sent mangled via gzip incorrectly. Another issue IE 11 has. This would result in $ not defined.

This has nothing to do with $(document).ready

Related Topic