4

I've asked why the below doesn't work and got a very clear answer.

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

So I've changed that into this.

<head></head>
<body>
  @RenderBody()
  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/Stuff.js")
</body>

However, I get the same misbehavior. Based on the diagnostics from the linked answer, I'm guessing that the scripts still don't render in the right order. How do I control it? Should I move both to header instead?

The generated markup ends like this.

      </form>
    </div>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="Stuff.js"></script>
  </body>
</html>

As asked - I'm adding a screenshot of the network tab showing scripts. There are other resources as well (images and stuff) but none of them is 4xx, no weird messages and I've turned them each off, still hitting the same problem.

enter image description here

Working in Default.js (formerly Stuff.js).

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

Producing error in Default.js (any of the lines).

//$(document).ready(function () { alert("ready"); });
$(window).onload(function () { alert("onload"); });
Community
  • 1
  • 1
  • 1
    Can you confirm jQuery has been loaded? Can you also confirm there are no errors in the console and no (relevant) 404s in the network tab? It might be worth trying to access jQuery in the console, see if it throws an error or not. If not, it is a loading order problem, if it *does* throw an error it's not due to the ordering of your scripts. –  Jan 04 '16 at 15:29
  • @JᴀʏMᴇᴇ Yes, it's loaded. When I execute another script printing it it shows a function (please, refer to the linked question for details on how I did that, if it's relevant without me realizing it). –  Jan 04 '16 at 15:33
  • 3
    There's no question something is going on that we can't see in the question, because those tags, in that order, will **definitely** finish loading and running `jquery-1.10.2.js` (or show a network error) before loading and running `Stuff.js`. – T.J. Crowder Jan 04 '16 at 15:39
  • 2
    The only way to debug this will be to cut out irrelevancies, one by one, from the template being rendered, until the problem stops happening -- and then look at the last thing you removed. Concentrate initially on any other scripts being loaded, via tags or from code in `Stuff.js`. – T.J. Crowder Jan 04 '16 at 15:40
  • @DarinDimitrov It's not loaded twice, as far I can see. And it's being found and works too when used as shown in the first sample below the image, but produces the error when used as in the second. –  Jan 05 '16 at 09:00
  • @erikscandola Please see the edit below the image. The first one works, the second doesn't... (I changed the name to Default.js, just to make sure I'm targeting the right file.) –  Jan 05 '16 at 09:08
  • `$(this)` works fine? If you change `$(window).onload(function () { alert("onload"); });` replacing $ with jQuery (`jQuery(window).onload(function () { alert("onload"); });`, it works? – erikscandola Jan 05 '16 at 09:14
  • Can you confirm that this happens both on *localhost* and on your deployment environment. Is it hosted in Azure? If so, please remove all the documents and make a new publish. Preferably, to a brand new trial account. It's a good idea to exclude all possible gotchas, as the issue seems tricky. – Konrad Viltersten Jan 05 '16 at 09:17
  • I am unable to reproduce this problem in a newly created ASP.NET MVC application. So the only conclusion I can come up with here is that there's something in your project or environment that is causing this issue. Unfortunately I am afraid that this is not in the code snippets shown so far. Trying to isolate the problem by removing irrelevant code from your project could lead to the cause. – Darin Dimitrov Jan 05 '16 at 10:06
  • @DarinDimitrov Following the suggestion from Konrad Viltersten and T.J. Crowder, I reset **everything** in my environment. The issue's gone! You were right in your sense. –  Jan 06 '16 at 20:16

1 Answers1

3

You should use

$(window).load(function () { alert("onload"); });

onload is JavaScript native event, but in JQuery is load

Please refer to the following post for more details : difference between $(window).load(function() { and $(document).ready(function() {

The second point and most importantly is you have the following

 @RenderBody()
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/Stuff.js")

If there any JQuery call in your views, let say you needed to call something in your home page, then JQuery library is not defined yet. Because Jquery renders after RenderBody

What you need to do is put a Section and and render the section after Jquery is loaded

You should have the following in your layout

@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Stuff.js")
@RenderSection("Scripts", required: false)

And in your views put the javascripts calls in the section

@section Scripts {
<script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() { alert ('Hi'); });
        //]]>
</script>
}

I hope this helps

Community
  • 1
  • 1
Felix Cen
  • 733
  • 1
  • 6
  • 24
  • That's a good point but then how would you explain the fact that the following expression doesn't work also: `$(document).ready(function () { alert("ready"); });`? – Darin Dimitrov Jan 05 '16 at 21:09
  • Not sure why it does not work for you. I tested it in my app and both worked. I am using asp.net mvc 5, Jquery 1.10.2. – Felix Cen Jan 05 '16 at 21:56
  • No, for me everything works. It's the OP that seems to be having troubles with that. So while your question explains why the `$(window).onload` might not have worked for the OP, it doesn't explain why `$(document).ready(function () { alert("ready"); });` hasn't worked for him. At least that's what he seem to have stated in his comments. – Darin Dimitrov Jan 05 '16 at 21:58