jQuery header code injection not running after index page Ajax reload

TQM5 · September 2, 2016

On a “York” template [index] page, I use jQuery {Header Code Injection} to modify the URL of a [Page] link on that [index], allowing me to effectively add a [Link] to an [index] with a photo background that is displayed with the rest of the content on the [index].

The code works fine when the [index] loads or is hard-refreshed by the browser. It does not work after Ajax is used to soft-refresh only the [index] page content and not the <head>, <footer>, or other surrounding elements. This happens consistently when users navigate around the site.

Squarespace notes this Ajax usage in the “York” template docs, specifying it cannot be removed. (See: https://support.squarespace.com/hc/en-us/articles/218212297-York-structure-and-style#toc-page-loading)

My question: How do you detect an [index] Ajax reload in Squarespace and subsequently re-run {Header/Footer Code Injection} using jQuery (or an alternate method)?

For clarity when talking about traditional web and Squarespace features simultaneously:

“Squarespace proper names "
[ Squarespace page types ]
{ Squarespace settings }
< Standard HTML >

digitalfreelancer · September 5, 2016

Hi, the only way I can see (I'd love it if someone can suggest a better way) is to disable the ajax loading. A massive thank you to Jason Barone for pointing this out on Twitter:

Add this to code injection footer.

<script>window.Template.Constants.AJAXLOADER = false;</script>

Hope that helps. It helped me! Although I do miss the quick, smooth page loading

Andrew

Squarespace Expert

olesund · September 11, 2016

This works, but yes, I wish there was a way to keep the smooth loading.

XaQQhcQtEhfdzDvpDdQb · September 11, 2016

This is very easy to solve. Simply modify the AjaxLoader prototype to add an additional custom init function right along side of where Squarespace runs their own block init.

This assumes you've bound some sort of custom object that holds your init function(s). Sometimes to better to use some sort of custom event emitter for this, but that would be some additional dev. This seems much easier.

window.onload = function() {
 this.AjaxLoader.prototype.initializeSqsBlocks = function () {
   window.SQS.Lifecycle.init();

   console.log( "Foo!" );
   window.CUSTOM.YourCustomInitFunction();
 }
};

The end result is that when the ajaxloader fires, it will trigger the initializeSqsBlocks init as usual, which you've now hijacked to add your own additional init function.

--Jason Barone
Founder at Squarefront and Talk Squarespace.
Host of Talk Squarespace Live Code and Talking Squarespace.
Designer, developer, creator of all things Squarespace.

TQM5 · September 15, 2016

Blunt but effective for manually disabling Ajax on Squarespace templates that do not otherwise give you the option to do so (which, as of September 2016 are York, Artesia, Harris, Lange, Jasper, or Shibori).

TQM5 · September 15, 2016

Thanks for your help—this solves the problem. Is there any difference in result whether this runs in the Header, Footer, or per-page code injection?

TQM5 · September 26, 2016

As noted in the original question some newer themes do not allow Ajax loading do be disabled via the Squarespace Style Editor (as of September 2016). From the Squarespace docs:

Unlike other templates, Ajax can’t be disabled for York, Artesia, Harris, Lange, Jasper, or Shibori.

Source: https://support.squarespace.com/hc/en-us/articles/218212297-York-structure-and-style#toc-page-loading

TQM5 · September 26, 2016

As of September 2016 this appears to be the case. The original answer now generates this error in the console:

TypeError: undefined is not an object (evaluating 'this.AjaxLoader.prototype')

TQM5 · September 26, 2016

This re-solves the problem. Accepted after the original answer's solution was rendered moot by Squarespace changes to site-bundle.js, per octopus' comment.

TQM5 · October 17, 2016

Thanks for the heads up and the ultimately correct answer!

therobhayes · March 14, 2017

@octopus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template.

In my header I am injecting:

<style>
.tweak-show-footer .site-footer {
   display: none;
}
</style>

<div class='footer'>
<a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png">
</div>

therobhayes · March 14, 2017

@octupus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template.

If I understand the code above - drop window.addEvent... in the header code injection between , and place all of your header code to be injected where it says "// do stuff". Am I on the right track there?

If so, I have tried that to no avail.

In my header I am injecting:

<style>
.tweak-show-footer .site-footer {
   display: none;
}
</style>

<div class='footer'>
<a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png">
</div>

Any guidance on how to make this work?

URL for reference: https://carvelcreative.squarespace.com/

Thanks

therobhayes · March 14, 2017

@octopus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template.

In my header I am injecting:

<style>
.tweak-show-footer .site-footer {
   display: none;
}
</style>

<div class='footer'>
<a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png">
</div>

https://carvelcreative.squarespace.com/

therobhayes · March 14, 2017

@octopus - I am having the same problem with the AJAX loader preventing the loading of the code injections on the Tremont template.

In my header I am injecting:

<style>
.tweak-show-footer .site-footer {
   display: none;
}
</style>

<div class='footer'>
<a href="http://instagram.com/"><img border="0" alt="Instagram" src="https://static1.squarespace.com/static/58841b992994caa61ac020cf/t/58b18ecc3a04111160c9cf49/1488031436552/Instagram_white.png">
</div>

therobhayes · March 15, 2017

Gotchya - applies to JS injections only. Thanks

therobhayes · March 16, 2017

I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely

<script> 
window.addEventListener("mercury:load", function(){
$(window).load(function() {  
});
function show() {
console.log('inside show');
$('.loader').delay(1000).hide();
$('body').fadeIn();
};
setTimeout(function(){
$(".loader").fadeOut("slow");
}, 3000 );
}); 
</script>

therobhayes · March 16, 2017

I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely

<script> 
window.addEventListener("mercury:load", function(){
$(window).load(function() {  
});
function show() {
console.log('inside show');
$('.loader').delay(1000).hide();
$('body').fadeIn();
};
setTimeout(function(){
$(".loader").fadeOut("slow");
}, 3000 );
}); 
</script>

therobhayes · March 16, 2017

I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely

<script> 
window.addEventListener("mercury:load", function(){
$(window).load(function() {  
});
function show() {
console.log('inside show');
$('.loader').delay(1000).hide();
$('body').fadeIn();
};
setTimeout(function(){
$(".loader").fadeOut("slow");
}, 3000 );
}); 
</script>

therobhayes · March 16, 2017

@octopus - I have figured out a work around for my comment above. But I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely

<script> 
window.addEventListener("mercury:load", function(){
$(window).load(function() {  
});
function show() {
console.log('inside show');
$('.loader').delay(1000).hide();
$('body').fadeIn();
};
setTimeout(function(){
$(".loader").fadeOut("slow");
}, 3000 );
}); 
</script>

https://carvelcreative.squarespace.com/

therobhayes · March 16, 2017

I'm running into an issue with the AJAX loader blocking the Jquery page load animation you provided here. The 'window.addEventList...' code appears to be blocking the jquery entirely

<script> 
window.addEventListener("mercury:load", function(){
$(window).load(function() {  
});
function show() {
console.log('inside show');
$('.loader').delay(1000).hide();
$('body').fadeIn();
};
setTimeout(function(){
$(".loader").fadeOut("slow");
}, 3000 );
}); 
</script>

barrcodes · July 11, 2017

Jason, thank you for taking the time to respond. It looks like the architecture has changed, causing this to fail. There is no window.AjaxLoader, and the only reference to SQS I can find is Y.SQS, which has no Lifecycle object.

I realize this answer was given several months ago, how can we hijack the ajax loader now? And what can we do to future-proof our solution?

willryan042 · July 15, 2017

I'm also looking for a solution to this problem. It seems disabling Ajax loading in the style editor solves the problem, but I'd rather not do that as I have some lengthy image-heavy pages where Ajax loading seems like it'd be beneficial.

digitalfreelancer · July 17, 2017

Folks, this is the answer that currently works for me, as provided by @Octopus.

<script>
document.addEventListener('DOMContentLoaded', init);
window.addEventListener('mercury:load', init);

function init(){
  // javscript goes here
}
</script>

Andrew -Digital Freelancer

raglan · December 15, 2017

Thanks Andrew, this worked a charm for me on the Clay template! I used it to add the same Additional Info to every product.

SirTophamSmack · December 18, 2018

I've worked out a solution for this that works in December 2018. The solution is a little inelegant, but effective. I'm using Mutation Observers to see when the title of a page changes and re-running my JS when it sees that happen. Your code gets put into this twice: once to call it on page load, and next to call it inside the Mutation Observer. There may be better ways to accomplish this, so if you can improve on this I'd be curious to see what you do.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   $(function() {
       var dom_observer = new MutationObserver(function(mutation) {
           // YOUR CODE HERE
       });
       var container = document.querySelector('title');
       console.log(container);
       var config = {
           attributes: true,
           childList: true,
           subtree: true,
           characterData: true
       };
       dom_observer.observe(container, config);
   });
</script>
<script>
   // YOUR CODE HERE
</script>

jQuery header code injection not running after index page Ajax reload

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Archived

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources