jQuery header code injection not running after index page Ajax reload

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

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

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.

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

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

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?

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:

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

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

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.

Thanks for the heads up and the ultimately correct answer!

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

@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

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

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

Gotchya - applies to JS injections only. Thanks

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>

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>

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>

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

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>

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?

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.

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

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>

This answer still works for Carson theme