current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote 1 down vote favorite

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 https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=161473), 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.

share|improve this question
1  
This question is a bit confusing at the moment. In any case, is it possible that Chrome was using a cached version of jquery? –  Steven Burnap Aug 9 '13 at 20:24
    
It's been working this way for several weeks, and I shut off the computer every night (I don't know if that clears the cache or not). –  B. Clay Shannon Aug 9 '13 at 21:08
    
If the file was not resolvable then wouldn't you have all sorts of 404 errors - in the console tab and network tab in Chrome's developer tools? –  WSkid Aug 10 '13 at 8:24
1  
The web developer's mantra, "If it works in IE, but not the other browsers, your code is wrong." You can never trust IE to do anything right. Eventually, you'll find out the issue was with your code or Chrome was right in the first place. –  Rob Sep 12 '13 at 1:43
1  
@ClayShannon IE11 already trails behind all other browsers and it's not even out yet. And then, there it will sit, for at least another year while every other browser moves the web forward every 6-8 weeks. I haven't compiled my list for that one yet. –  Rob Sep 14 '13 at 13:16

1 Answer 1

up vote 1 down vote

before you call $, which is the variable for jquery, you need to let the page load first, then call any jquery object:

  $(document).ready(function () {

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

    });

"Javascript statements are executed by the browser immediately and not when the DOM is ready." - See Pro jquery by Adam Freeman [http://www.apress.com/9781430240952] page 107

If you run the following In Firefox, Chrome and IE, it works. The background changes

<html>
<head>
<title>Test</title>
<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">    
              $(document).ready(function () {

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

              });
   </script>    
</head>
<body>

    <p>Test</p>
</body>
</html>

If you remove the line: $(document).ready(function () {..} and only have:

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

It will not work.

share|improve this answer
3  
This wouldn't be any different. The $ is used regardless of $(document) vs $("body"). –  Joel Aug 9 '13 at 20:39
1  
@Phil Joe I'd right. Wrapping jQuery code in jQuery's domready event won't solve the problem because the domready function is part of the jQuery library. –  Rob W Aug 9 '13 at 23:50
1  
I understand page rendering and event binding, but a CSS directive is not an event binding. It's a nonstarter anyway because we're talking about $ being defined; it doesn't matter whether we use a selector or $(document), $ will be undefined in both cases. That's what I mean. Using $(document) doesn't define $. –  Joel Aug 10 '13 at 2:32
2  
@Joel You're mistaking what this answer is explaining. <body> is what doesn't exist when that JS runs, which is why you have to wait for DOM load. That said, this doesn't explain the error in the question, which was about $ itself –  Izkata Aug 13 '13 at 14:59
1  
@Izkata - "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready. " - learn.jquery.com/using-jquery-core/document-ready –  Phil Vallone Oct 14 '13 at 13:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.