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

Why doesn’t this widget load on Squarespace?

Why is this code only working sometimes?

I've answered many questions on this subject. Each asks why a particular piece of code isn't working properly and it usually mentions that it only works after the page is refreshed or reloaded. Usually, the question refers to code that was found on one of the forums (usually Squarespace Answers) but it can also refer to scripts or ‘widgets’ that companies have produced to add features to a website.

So why is this happening? Ajax.

If you're using one of the newer Squarespace templates you’ll find that it uses a great technique called Ajax (Asynchronous JavaScript And XML). This allows your Squarespace site to change content dynamically without the need to reload the entire page. This makes your website faster because when a different page is selected in the navigation, only the canvas content is loaded. The header and footer are already in place and don’t reload unless header content has changed. This makes the page appear to load faster.

The technique also enables features like ‘lazy loading’ where a few images or blog posts are loaded initially, and then, as the user scrolls down the page, more images or posts appear just in time. It also allows sites to show a ‘quick view’ panel for products.

The downside is that if you’ve obtained some code that hasn’t been written to work with Ajax, it won’t work properly. Many code samples run when the page loads, but if Ajax is enabled, the page only loads for the initial page. After that, the content is updates using Ajax so the page never needs to load again.

So what can you do?

Rewrite the Code

If your code is behaving as I’ve described then it is not Ajax compatible. It was probably written prior to 2016 when Squarespace started adding Ajax to their templates. If you obtained the code when you purchased an add-on for Squarespace then it’s best to contact the supplier and ask them to update their code. Squarespace started adding Ajax to their templates in 2016 so it’s about time companies updated their ‘widgets’ to work with it.

If you found the code on an internet forum then you may not be so lucky. You could try to contact the author or you could post a new question on a forum, but you aren’t guaranteed an answer. Alternatively you could hire a developer to code an Ajax-compatible solution for you.

Disable Ajax

If you don’t want the Ajax features that improve your website, a quick workaround is to disable Ajax on your site. To disable Ajax:

Go to Design > Site Styles.

Scroll down to SITE: LOADING.

Uncheck Enable Ajax Loading.

When you save your changes, this workaround will get your code working but bear in mind that all the great Ajax features that improve your website’s performance are now disabled. Visitors love sites that load quickly and so do search engines.

SF DigitalAjax, Refresh, JavaScript