How to make sure JS code is called after JQuery was fully loaded?

Question

I have a "ReferenceError: $ is not defined" problem. People are recommending to call my JS code AFTER the page was fully loaded so I changed my page (header section) to this:

<script src="../PriceScript.js" type="text/javascript"></script>
<script>
$(document).ready(function () 
{
  PriceModBatchAsm('#IDModBatchAsm')   <-------- error here
});
</script>

However, again the same message: the $ is not defined.

Update:
I think I am not loading JQuery into my web page. The script worked in a different page because in that page the JQuery was already loaded like this:

  <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Is this the proper way to load it?

Where is jQuery being included? if `$` is not defined it sounds like JQ hasn't loaded — Loktar, May 28 '14 at 16:09
Double-check your script source. It might not be finding your jquery file. — Darren Wainwright, May 28 '14 at 16:09
Are you sure that jQuery is even being pulled into the site. As long as it is before any js that is referencing it, it should be fine. — Ballbin, May 28 '14 at 16:09
I see you're using `"../"` to reference your Js scripts - this in itself can be the cause, as it's relative to the page rather than the route - so a page a few folders further down won't find the file. Try changing those to absolutes. — Darren Wainwright, May 28 '14 at 16:10
Jquery script tag looks ok - put it in the ``, before any usage of `$(document)` - It has to be BEFORE any attempts to use JQuery — Darren Wainwright, May 28 '14 at 16:14
Look in your browser's developer tools to see if all your js files are loading. — David Corbin, May 28 '14 at 16:15

score 0 · Answer 1 · answered May 28 '14 at 16:45

Depends on your usage. If you are going to use it everywhere, the proper way to load it would be some sort of master page that handled it across all your pages.

If you just need it on a few pages you could do it on just those pages.

You could also use some of the new(-ish) paradigms like bundling and minification.

score 0 · Answer 2 · answered May 29 '14 at 08:49

0

Solved.

I created 3 tiny images for each price that I wanted to show and put the images into my web pages. When price changes all I have to do is to update the images. This 'high tech' 100% reliable solution took me about 3 minutes.

answered May 29 '14 at 08:49

Gabriel

20,797
27
159
293

How to make sure JS code is called after JQuery was fully loaded?

2 Answers2