How should I locate my scripts in my web page

Question

I am developing an ASP MVC web application using some web technologies like Javascript and JQuery.

Due to the big use of script in my project, I am facing a lot of problems with the right position and order of these script inside my code.

Indeed, I am getting always errors in my browser.

For example, when I locate these Scripts in my Head tag by this order :

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="/template/web/js/jquery-ui.js"></script>

I will get these errors that mention a problem with the definition of the JQuery :

jquery.validate.min.js:16 Uncaught ReferenceError: jQuery is not defined at jquery.validate.min.js:16 jquery.validate.unobtrusive.min.js:19 Uncaught ReferenceError: jQuery is not defined at jquery.validate.unobtrusive.min.js:19 Index:1436 Uncaught TypeError: $(...).datepicker is not a function at HTMLDocument. ( http://localhost:60585/(S(yjivkav5ujyyjrcrznjabbqp))/Home/Index:1436:26 ) at i ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:27151 ) at Object.fireWith [as resolveWith] ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:27914 ) at Function.ready ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:29707 ) at HTMLDocument.J ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:29892 )

But when I try to locate all these scripts in the bottom of the page like this :

<script src="/template/web/js/jquery-ui.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

These errors will appear :

Uncaught TypeError: $(...).ziehharmonika is not a function at HTMLDocument. ( http://localhost:60585/(S(ls4ko4ghxnphalf2azyphinz))/Home/Index:1462:23 ) at i ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:27151 ) at Object.fireWith [as resolveWith] ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:27914 ) at Function.ready ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:29707 ) at HTMLDocument.J ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:29892 ) Index:1441 Uncaught TypeError: $(...).JiSlider is not a function at http://localhost:60585/(S(ls4ko4ghxnphalf2azyphinz))/Home/Index:1441:20 at dispatch ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:3:7537 ) at r.handle ( http://localhost:60585/template/web/js/jquery-2.2.3.min.js:3:5620 )

Answer 1

您需要将此脚本（加载jQuery）放在脚本列表的首位：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

Answer 2

You need to put jQuery files in the correct order.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>