jfox jfox - 2 months ago 30
Ajax Question

Squarespace AjaxLoader Event Binding

I'm working on a Squarespace site at the moment, trying to figure out how I can bind a function to their AjaxLoader without much success.

Here is a demo site that uses this loader – http://york-demo.squarespace.com/

In my console I can see all the XHR requests being triggered when switching between pages, and I've tried using the debug to capture event listeners.

I thought something bound to "readystatechange" would work, but it only triggers on the initial page load.

$(window).on("readystatechange", doStuff);


Any help would be most appreciated!

Answer

I found a pretty nice solution using mutationObservers on the Squarespace Answers forum – thank you @octopus!

Copy and pasted from here

Hope this helps anyone else struggling.

 window.onload = function(){
   react();
   watch(react);
 };
 function react() {
   var id = document.body.getAttribute('id'),
       target = 'collection-5787c6b0cd0f6801e859286a';
   console.log(id);
   if (id === target) {
     // execute your code for this page
   }
 }
 function watch(callback) {
   MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
   var observer = new MutationObserver(function(mutations) {
     for (var index = 0; index < mutations.length; index++) {
       var mutation = mutations[index];
       if (mutation.type === 'attributes') { 
         callback();
       }
     }
   });
   observer.observe(document.body, {
     attributes: true,
     attributeFilter: ['id']
   });
 }