How can I add jQuery to my site?

I have read the documentation on how to load custom JavaScript into the developer site, such as jQuery. I have implemented it the way the documentation suggests:

<script>window.jQuery || document.write('<script src="scripts/jquery-1.9.0.min.js"><\/script>')</script>

Loading the JavaScript file that I have uploaded to my ‘scripts’ directory on the server. That returned an 404 error saying that the file doesn’t exist. Because it was looking under /index/scripts/.. which of course does not exist. Thus the documentation is wrong.

I then went ahead and wrote this:

<script>window.jQuery || document.write('<script src="../scripts/jquery-1.9.0.min.js"><\/script>')</script>

Adding a ‘../’ infront of the referenced source. This stopped the 404 error meaning that the script does get loaded. But it’s not affecting anything on my page as expected?

I'm starting to fail to understand the benefit of using the squarespace developer platform as it posses more errors than suggested solutions. Any help would GREATLY be appreciated!

Any chance you could post a link to your site? I assume you're loading the Google CDN version of JQuery and falling back to this local one, is that right?

You can also add jQuery to your site via Settings > Code Injection > Header. Then place the following into it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Putting this into your site on Squarespace will allow you to use jQuery on your site. It can also be placed on individual pages if you so need it.

Also remember that if you use JavaScript files, images, and CSS they all have to be placed appropriately on your site. For Squarespace that is straightforward if perhaps a bit confusing.

• JavaScript files, images, etc.: These should be created as links referencing files that can be dragged and dropped into the Link widget of the Content Creator. When you have done that it make certain to note the URL which will be something like /s/myfile.js or something.
• CSS is best placed onto the individual page. If it is site wide you can add it to your code injection as a reference. Make certain to check via browser inspector to insure that your external reference is not running into errors such as not being found and what not.

Once you have all the elements in place you can then reference them via Code Block within your page.

Brief instructions on how to add jQuery on my site.

Hope this helps!

Also consider that adding a "non-secure" script on a secure site (depending on your browser) will temporarily block insecure (un-secure? non-secure?) items. On Chrome, you may have to click the "shield" in the address bar (and select 'load anyway') to load the code.

The site is only "secure" to those who are logged-into the site as a site member.These include [A] Trial Mode, or when pages or the site is locked, and you have to enter a password to access the site or obviously when you're a site contributor with a password.

The best workaround is to make the jQ script (and other externally-referenced scripts) "secure" by adding https.

@alanhouser Or, event better, you can use a protocoless URL. You do that by just leaving out http: altogether. So you'd have //ajax.googleapis.com... Protocoless URLs inherit whichever connection type - secure or insecure - is in the address bar of the browser.

Ah yes! I see that up there ^ Thanks!

Hi @Relborg , I made a video tutorial for you on how to Add JQuery to Site. Hope this helps! https://www.askquesty.com/post/add-jquery-squarespace-tutorial