Improperly included jQuery stops ordinary javascript from executing when placed beneath jquery code

Question

Can you confirm/explain this?

If jQuery is included after the js-file, any jQuery in the js-file won't be carried out, because the jQuery has not been included yet:

<script src="js_test.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then, if my javascript file looks like this:

alert('javascript is working');

(function(){
      alert('ordinary javascript in self-invoked function');
 })();

$(function() {
   alert('this is jQuery');
});

... the two javascript alerts will be carried out (not the jQuery alert).

But if I put the jQuery on top, like this:

 $(function() {
       alert('this is jQuery');
    });

      alert('javascript is working');

    (function(){
          alert('ordinary javascript in self-invoked function');
     })();

..then the remaining javascript is not carried out either.

So the rule seems to be that if jQuery included improperly, the javascript file will be read to the point where any jQuery appears, then it stops reading the script. Is this true?

I thought it would be able to read the script anyway and carry out the strictly javascript based code.

Why don't you include jQuery before any custom code and then you'll be able to use both jQuery and regular JavaScript without any issues? — dotnetom, Oct 25 '15 at 18:21
Open the console and look at the error message. You can't call a function that doesn't exist. — SLaks, Oct 25 '15 at 18:23

score 2 · Answer 1 · answered Oct 25 '15 at 18:29

2

If the jQuery is wrongly or not included, this piece of code produces an error:

$(function() {
   alert('this is jQuery');
});

That's because $ isn't defined (yet). And in case of an error, JavaScript execution simply stops, so everything after that line won't be executed.

Event handlers will still be executed, so the application does not become completely unusable.

answered Oct 25 '15 at 18:29

Jost

5,948
8
42
72

So it will search for event listeners first, then read the script again from top to bottom (so any event listener placed beneath jQuery code will still be executed)? – Galivan Oct 25 '15 at 19:13
No, but if you registered an event callback before the place the error occurs, and then trigger the event (e.g. click something), the callback will still be executed. If the handler would be registered after the place producing the error, it won't be registered and thus won't be executed. – Jost Oct 25 '15 at 19:31

score 1 · Accepted Answer · answered Oct 25 '15 at 18:28

When parsing a Javascript file, the interpreter will stop on any parse error and the entire script will be skipped and none of it will execute because the script could not be parsed (this is not what is happening for you, but I'm including it for completeness).

But, for runtime errors (which is what you are experiencing), the script will parse correctly and thus get loaded, but will only execute until the first runtime exception and then the rest of the script after that exception will not execute.

So, in your case, your script will execute until it gets to something that needs jQuery (which is the $(...) function call in your script and because jQuery is not yet loaded, it will throw an exception (trying to call a function that does not exist).

The solution seems simple here. Just put any script that needs jQuery AFTER the jQuery is already loaded.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="js_test.js" type="text/javascript"></script>

Alright, thanks. But if the jquery link would at some point be broken, then the whole script won't work, including javascript. Initially I thought that the script would be read anyway, skipping the jQuery, but I realize that's not how it works. — Galivan, Oct 25 '15 at 19:08
@Galivan - in general, if you're using jQuery and the jQuery link is busted, then lots of things in your site don't work. You usually don't try to use jQuery AND make a functional site if the jQuery link happens to be busted. There are techniques to load jQuery from an alternative site if the primary site happens to be busted. You can see a discussion of that here: [Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail](http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-go) — jfriend00, Oct 25 '15 at 21:48

score 0 · Answer 3 · answered Oct 25 '15 at 18:27

0

It will be because $ will be undefined when called, preventing the rest of your code from continuing. Right click on page, click 'Inspect Element' and click on 'Console' tab. You'll prob see it?!

answered Oct 25 '15 at 18:27

An0nC0d3r

1,275
13
33

Improperly included jQuery stops ordinary javascript from executing when placed beneath jquery code

3 Answers3