0

I made sure to verify that my reference to the jQuery is correct like so.

window.onload = function() {
  console.log($(this));
};

I get to see non-null value. But when I try any of the below (the part above commented out), I get the error.

Uncaught ReferenceError: $ is not defined

//$(document).ready(function () { alert("ready"); });
$(window).onload(function () { alert("onload"); });

I'm confused how it can be defined and not defined at the same time. After some googling I've found several code samples like this and as far I can see, it's not a syntax in the file.

The markup is like so.

<head>
  ...
  <script src="Stuff.js" type="text/javascript"></script>
</head>
<body>
  ...
  @Scripts.Render("~/bundles/jquery")
</body>

I've seen in the default (and working) template for MVC.NET under Razor that they do @Scripts.Render("~/bundles/modernizr") in the head, and then @Scripts.Render("~/bundles/jquery") at the bottom of the body. I figured that I could follow the same pattern. Evidently, I failed. Sorry for being unclear. Incorrect diagnostics due to ignorance.

Community
  • 1
  • 1
  • 2
    jQuery does not have onload-method, that code should never work. – Esko Jan 04 '16 at 13:34
  • what is the other pieces of code with your ```window.onload```? Did you used strict mode (```'use strict';```)? – Linh Pham Jan 04 '16 at 13:34
  • Open console in your web and put '$'. Did you get **function (a,b){return new e.fn.init(a,b,h)}** ? – Itipacs Jan 04 '16 at 13:34
  • 1
    Be aware that $ and $$ exist on Chrome even though jQuery doesn't. – GillesC Jan 04 '16 at 13:35
  • I bet you included jQuery after you included the code above. – epascarello Jan 04 '16 at 13:38
  • Can you show how your script tags are included? I think it is key to solving your question. – scunliffe Jan 04 '16 at 13:39
  • @Esko I toolk it from [here](http://stackoverflow.com/a/807903/1525840) –  Jan 04 '16 at 14:31
  • @Louy I'm not using WordPress. Also, I don't understand your edit to my question. It actually changed what's being asked and what's been done to troubleshoot. –  Jan 04 '16 at 14:32
  • @Itipacs I have $ defined. It says: "function jQuery()" in FF and in Cr: "function ( selector, context ) {// The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }" –  Jan 04 '16 at 14:35
  • @Beri Yes, see comment above. –  Jan 04 '16 at 14:46
  • @engineer Please see the edit to the question. –  Jan 04 '16 at 14:46
  • @epascarello I bet so too, based on the info. I updated the question. –  Jan 04 '16 at 14:47
  • @scunliffe Yes, please see edit. –  Jan 04 '16 at 14:48
  • And that is your problem. It is like trying to eat a pizza before you make it. Move your script below the jQuery bundle. – epascarello Jan 04 '16 at 14:49
  • @epascarello Easier said than done. I've moved thing around and Now I have `@RenderBody() @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/Stuff.js")` but still the same misbehavior... Suggestions? –  Jan 04 '16 at 15:13

1 Answers1

3

You have your script tag for jQuery in the wrong place. It's after the script tag for the code you've shown, whereas it should be before it.

The reason it can be both defined and undefined is that the timing is different. Those references to $ are at very different times:

This one:

window.onload = function() {
  console.log($(this));
};

happens really late in the page load cycle, after all the HTML is parsed, all of the script tags processed, all the images loaded, etc., when the load event on window finally fires.

These:

//$(document).ready(function () { alert("ready"); });
$(window).onload(function () { alert("onload"); });

happen immediately when the parser reaches the script block they're in, hands off to the JavaScript engine, and the JavaScript engine runs that code.

So this would work:

<script>
window.onload = function() {
    console.log($(this));
};
</script>
<script src="jquery.js"></script>

but this fails:

<script>
$(document).ready(funtion() {
    alert("ready");
});
</script>
<script src="jquery.js"></script>

This works regardless:

<script src="jquery.js"></script>
<script>
$(document).ready(funtion() {
    alert("ready");
});
</script>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I got it. The question's been answered. Now, I still don't get it to work, despite moving to `@RenderBody() @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/Stuff.js")`. Is it a Razor specific question? If so, I'll that separately. The way I see, it should render just the order you're suggesting. –  Jan 04 '16 at 15:15
  • @AndyJ: Bizarre. I would expect that too. If you look at the generated page in the browser, what do you see? Are there any attributes on the `script` tags? (There are two attributes, `async` and `defer`, that each change how scripts are processed. But I'd be shocked if Razor were rendering script tags with them unless you told it to.) – T.J. Crowder Jan 04 '16 at 15:19
  • No such attributes, just as you predicted. And the order in the document is as expected. I'll it over to the other question. Maybe someone will see something. –  Jan 04 '16 at 15:28