Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

jQuery header code injection not running after index page Ajax reload


TQM5

Question

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 >

Edited by TQM5
Initial Revision
Link to post
  • Answers 22
  • Created
  • Last Reply

Top Posters For This Question

22 answers to this question

Recommended Posts

  • 2

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

Edited by Andrew Moore
Initial Revision
Link to post
  • 2

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.

Edited by jasonbarone
Initial Revision

Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
  • 0

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

Link to post
  • 0

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


Link to post
  • 0

@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 post
  • 0

@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

Edited by therobhayes
Initial Revision
Link to post
  • 0

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

Edited by deactivated_user1
Link to post
  • 0

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


Edited by deactivated_user1
Initial Revision
Link to post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

@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 post
  • 0

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>

Edited by deactivated_user1
Initial Revision
Link to post
  • 0

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 post
  • 0

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.

Link to post
  • 0

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>



Edited by SirTophamSmack
Initial Revision
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...