Highcharts javascript error when other javascript file is included

Question

I'm in the process of rebuilding my website in the laravel framework, using the SB admin 2 template. This template includes a file called frontend.js which is for the menu among other things. The file can be seen here: https://github.com/start-laravel/sb-admin-laravel-5/blob/master/public/assets/scripts/frontend.js

In my old site, I used a few Highcharts, and I want to use them in the new one too. In the old site, I used a script like this: https://jsfiddle.net/do0gm917/

and in the header I have:

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

When I try to do the same in the new site, I get this error: Uncaught TypeError: $(...).highcharts is not a function

I noticed that when I remove frontend.js, the highcharts works fine, so the problem is not in the highchart code itself, but apparently the two scripts do not like to work together.

My Javascript knowledge is pretty limited, and since the frontend.js file is 15324 I have no clue how I can debug this problem. Any ideas?

Most likely your jQuery object got overwritten by your frontend.js. Try to see what you get for jQuery.fn.jquery or $.fn.jquery in console. Most likely $ object is overwritten but you'll still be able to use jQuery in place of $ so jQuery("container").highcharts() will still work. — 11thdimension
– 11thdimension, Commented Dec 11, 2015 at 19:51
When I try jQuery.fn.jquery or $ in the console I get "2.1.3" as answer. Not sure if that's a good thing or not (I guess not, since I'm using jquery 1.9.1.). When I replace $ by jQuery I get "Uncaught TypeError: jQuery(...).highcharts is not a function" — ErikL
– ErikL, Commented Dec 12, 2015 at 9:53

11thdimension · Accepted Answer · 2015-12-13 12:56:38Z

1

The fact jQuery.fn.jquery prints version is a good thing as that means jQuery object was not overwritten by some other library.

Since you're using 1.9.1 and you're getting 2.1.3 that means you have 2 jQuery versions loading and 1.9.1 jQuery object(which contained highcharts function) was overwritten by 2.1.3 object and that in turn deleted the highcharts function too. You can try to stop second version from loading or if you can't do that then try using jQuery noconflict mode that'll allow both versions to coexist. You can do use the noconflict as bellow.

Edited*

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script>
    var jQuery191 = jQuery.noConflict( true );
</script>

Since jQuery191 was saved just after loading jQuery-1.9.1 it will have the reference to that version. Now even if 2.1.3 overwrites the jQuery object it won't be overwriting jQuery191 object so it can still be used to render highcharts as bellow.

jQuery191.highcharts(...)

edited Dec 13, 2015 at 12:56

answered Dec 12, 2015 at 16:03

11thdimension

10.7k4 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ErikL Over a year ago

Thanks for your suggestion, I'm however still running into some issue when I try to use the noConflict function you described. If I include that right after the jQuery script, it seems to load jQuery into that var, because when I do "jQuery191.fn.jquery" in concole I get "1.9.1" as answer. However,I now get the error "Uncaught TypeError: jQuery191(...).highcharts is not a function". Apparently jQuery191 does not contain the Highchart function. I've been googling (found some familiar problems like in SO question 23369849). but could not figure out how to "tell" highcharts what jquery to use...

ErikL Over a year ago

I think I figured out a solution. Since a jquery version is already loaded (2.1.3) I figured that there should not be a need to load another version (highchart should just as well work with 2.1.3). So I just removed the line to include 1.9.1 and placed the line to load frontend.js above the lines to load highchart. Miraculously that worked :). I'm still interessted in other solutions and why I could not get noConflict to work, so any comments are working.

11thdimension Over a year ago

My bad, I was careless, you have to save noConflict object after it's been modifed with highcharts, so it should be directly below highchart libraries. I have upated my answer with the correct config now.

ErikL Over a year ago

Thanks, that makes sens now that I think about it :)

Collectives™ on Stack Overflow

Highcharts javascript error when other javascript file is included

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related