Streaming live at 10am (PST)

jQuery Plugin Error: How do I keep from loading jQuery twice?

Hey, I’m trying to use the MapSVG plugin on my site: https://www.technoserve.org/annualreport/_2018test/mapsvg/

I get this error when I try to load it: Uncaught TypeError: jQuery(…).mapSVG is not a function.

I think it is because I have jQuery loaded twice, but I can’t see how that’s happening or how to fix it. Any help is much appreciated. Thanks!

More info if needed—I have this in the :

And this in the embed:

1 Like

@madewithrelish - Hello and welcome to the Forum. :wave:

Webflow serves a version of JQuery on all sites automatically. It is loaded before the body close. Any scripts you add that have a dependancy on JQuery, should have the embed code added to the page or site settings > before body close. Remove any included jQuery load from your embed since it is not needed.

When looking for help, the best practice here is to share your project Read-Only Link. You can always remove the link after your project issue is resolved.

2 Likes

Thanks so much for getting back to me.

Here’s my Read-Only link: https://preview.webflow.com/preview/technoserve-2018-annual-report?utm_source=technoserve-2018-annual-report&preview=d9fa70200b60772c83e5f3f47f11ae3c

I’m afraid I’m still unsure of the next step. Should I move all of the code I have in the head code to the footer code?

Remove these scripts from the head area.

<script src="https://www.technoserve.org/annualreport/_2018test/mapsvg/js/jquery.js"></script>
<script src="https://www.technoserve.org/annualreport/_2018test/mapsvg/js/jquery.mousewheel.min.js"></script>
<script src="https://www.technoserve.org/annualreport/_2018test/mapsvg/js/jquery.nanoscroller.min.js"></script>
<script src="https://www.technoserve.org/annualreport/_2018test/mapsvg/js/mapsvg.min.js"></script>

Place those in the before body close area. Then add the unique code for a map, the tool provided and place that in the before body close area , on the page you want the map to be embedded on.

That code looks like …

jQuery(document).ready(function(){
jQuery("#mapsvg").mapSvg({width: 709.60931,height: 612.51825,viewBox: [0,0,709.60931,612.51825],gauge: {on: false,labels: {low: "low",high: "high"},colors: {lowRGB: {r: 85,g: 0,b: 0,a: 1},highRGB: {r: 238,g: 0,b: 0,a: 1},low: "#550000",high: "#ee0000",diffRGB: {r: 153,g: 0,b: 0,a: 0}},min: 0,max: false},source: "/annualreport/_2018test/mapsvg/maps/geo-calibrated/belarus.svg",title: "Belarus",responsive: true});
});
</script>

Then insert a div on the page where you want this map displayed and give an ID of “mapsvg”.

Thank you, I think I’ve done this correctly, but now my error reads:
Uncaught ReferenceError: jQuery is not defined

Continued thanks…

Can you tell me which page?

You also need to remove this script from the project settings before body close (I meant to omit that since you don’t need to load it like I described).

It’s toward the top of the Impact page. I omitted the line of code you mentioned, but the error (Uncaught ReferenceError: jQuery is not defined) is still there.

Take all the script code out of the embed on your page. Add that code to the before body close on the page.

Well, we have reached a point where I’m getting a static “Loading Map” message. That’s progress in my book! But I’m now getting ANOTHER error, which I suspect might be beyond a Webflow custom code issue. If you know what might be causing this, I’d love to know, but no worries if not.

jquery-3.3.1.min.js:2 GET https://technoserve-2018-annual-report.webflow.io/annualreport/_2018test/mapsvg/maps/geo-calibrated/belarus.svg?v=1 404 (Not Found)

That does not exist, that is why you are getting your error. You will need to reference a correct source for that file, in the last script. So you have to take that file and either add it to your project or find a URL where it already is hosted and use that. If you add it to the project, you need to copy the CDN URL and change the URL in the script.

I am bowing out now.

Thanks so much for your help. Really appreciate it.

1 Like