jfox jfox - 6 months ago 38
Ajax Question

How can I bind events to the Squarespace AjaxLoader?

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

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


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 () {

     console.log( "Foo!" );

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. It's kind of a makeshift way of attaching an emitter to the ajaxloader without modifying it too much.