Streaming live at 10am (PST)

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

#1

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:

#2

@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.

1 Like
#3

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?

#4

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”.

#5

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

Continued thanks…

#6

Can you tell me which page?

#7

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).

#8

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.

#9

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

#10

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)

#11

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.

#12

Thanks so much for your help. Really appreciate it.

1 Like