Jump to content

jQuery header code injection not running after index page Ajax reload

Recommended Posts

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 >

Link to comment
  • Replies 22
  • Created
  • Last Reply

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

Link to comment

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.

Link to comment
  • 2 weeks later...
  • 3 weeks later...
  • 4 months later...

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


Link to comment

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


Link to comment

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

Link to comment

@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

Link to comment

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

Link to comment

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>

Link to comment

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>

Link to comment

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>

Link to comment

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>

Link to comment
  • 3 months later...

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?

Link to comment
  • 4 months later...
  • 1 year later...

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>



Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.