Yoga Yoga - 14 days ago 5
jQuery Question

loading local script file in html file properly

When loading the jQuery lib file into HTML file and try running it in various browser, it is working in IE, Chrome but it failed working in Mozilla.

Failure case, how i loaded my jQuery file into my HTML file:

<SCRIPT type="text/javascript" src="C:/Users/Local/jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="C:/Users/Local/jquery.layout-latest.js"></SCRIPT>


When i do the above, it is not working in Mozilla Firefox (Version : Firefox ESR 45.5.0). When i see it in firebug, i see the as attached ("IMAGE_01"). Hence i understand, jQuery libs are not loading properly. And the webpage is not loading it was throwing console error as "ReferenceError: $ is not defined?".

To resolve this, i copied the contents of jQuery lib files and pasted it in the same HTML file, in this case, it is working fine.

My doubt is, why this file is not properly loaded in Mozilla, when i am referring the file name from my local (Note : the same file scripts i copied into my html file).

jquery.min.js -> Version jQuery v1.10.2

jquery.layout-latest.js -> [http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js][2]

enter image description here

Answer

For me, I would place all my files in one same project folder.

So for example I have this file structure inside my folder named Project:

Project

  • jquery.min.js
  • jquery.layout-latest.js
  • style.css
  • index.html

I will call the scripts like below:

<script src="jquery.min.js"></script>
<script src="jquery.layout-latest.js"></script>

Notice that my files are inside on the same level which is the root.

How about if the js files are all in the project/js/ folder?

<script src="../js/script.js"></script>