Why doesn't my javascript code work until I refresh the page?

When javascript has been added to a newer template, it doesn't always work until the page/site is refreshed. Why?

I've answered a number of questions on this subject. Each asks why a particular piece of code isn't working unless the page is refreshed or reloaded. Usually, the person is asking about code that they've found on this forum and that they've added to their site. They just can't understand why it doesn't work for them properly. It doesn't work the first time, but when they load the page a second time, it appears to work! I've posted this question to save others posting a series of related questions.

So why is this happening? Ajax.

If you're using one of the newer Squarespace templates, the chances are that it uses Ajax, a feature that allows parts of a page to be loaded, without loading the full page. For example, when a visitor wants to open a new page, it could be opened without reloading the header and footer. It can also power a feature called 'Infinite Scroll' where only the first few blog posts are loaded initially but as the visitor scrolls down the page, more blog posts download and appear. It will continue loading blog content until all of the posts have been displayed, hence appearing to be an infinitely long page.

The downside is that when you have Ajax enabled, older JavaScript code that wasn't written to work with Ajax, won't work properly. That's the case with the majority of JavaScript answers on this site, especially pre-2018.

So what can you do?

The best solution is to source new Ajax-enabled code. If you are using code provided by a third-party company, ask them for an Ajax-enabled version to work with Squarespace.

However, if you find code on this site, or on a similar site, that isn't Ajax compatible you have two choices.

• Hire a developer to write you some better code
• Use the code you've found and disable the Ajax features on your site.

It's worth noting that disabling Ajax is not a solution. It's just a workaround. It will allow you to run old code that hasn't been written to work with Ajax-enabled sites but if you disable it, you will lose many more features that improve the performance of Squarespace sites.

If your template uses Ajax loading (all the Brine-family templates do) and you want to disable Ajax you can do so in the Style Editor. To disable Ajax:

Open a Blog Page then, in the Home Menu, click Design, and then click Style Editor.

Scroll down to Site: Loading.

Uncheck Enable Ajax Loading.

This workaround will fix the issue, but it will disable Infinite Scroll and all Ajax features.

I hope that helps.

-Paul

Squarespace Expert & Experienced Developer

This was super helpful! Thank you.

Thank you SO much!

This was spot on and was informative in helping me understanding why this was happening. It helped resolve the issues I was having with the MindBody Online Branded Web Tools scripts.

You are the man Paul.

This solved my problem immediately as well. Does anyone have more Ajax friendly hubspot embed coding to solve this?