Preface
- Please choose and implement a method of installation first
- Then choose and implement a method for calling Ajaxify as indicated below
Full body swap
let ajaxify = new Ajaxify();
When no value for elements
is specified, ajaxifies the whole site, dynamically replacing the whole body
across pages.
(Might be a good starting point)
ID selection
(Allows you to specify the elements that you would like to be swapped only)
let ajaxify = new Ajaxify({elements: '#content'});
Ajaxifies the whole site, dynamically replacing the element with the ID “content” across pages
If several elements should be swapped, just specify their IDs like this:let ajaxify = new Ajaxify({elements: '#sidebar, #content'});
The plugin can take an arbitrary amount of IDs
Options default values
{ // basic config parameters elements: "body", //selector for element IDs that are going to be swapped (e.g. "#el1, #el2, #el3") selector : "a:not(.no-ajaxy)", //selector for links to trigger swapping - not elements to be swapped - i.e. a selection of links forms : "form:not(.no-ajaxy)", // selector for ajaxifying forms - set to "false" to disable canonical : false, // Fetch current URL from "canonical" link if given, updating the History API. In case of a re-direct... refresh : false, // Refresh the page even if link clicked is current page // visual effects settings requestDelay : 0, //in msec - Delay of Pronto request scrolltop : "s", // Smart scroll, true = always scroll to top of page, false = no scroll scrollDelay : false, // Minimal delay on all scroll effects in milliseconds, useful in case of e.g. smooth scroll bodyClasses : true, // Copy body attributes from target page, set to "false" to disable // script and style handling settings, prefetch deltas : true, // true = deltas loaded, false = all scripts loaded asyncdef : true, // default async value for dynamically inserted external scripts, false = synchronous / true = asynchronous alwayshints : false, // strings, - separated by ", " - if matched in any external script URL - these are always loaded on every page load inline : true, // true = all inline scripts loaded, false = only specific inline scripts are loaded inlinehints : false, // strings - separated by ", " - if matched in any inline scripts - only these are executed - set "inline" to false beforehand inlineskip : "adsbygoogle", // strings - separated by ", " - if matched in any inline scripts - these are NOT are executed - set "inline" to true beforehand inlineappend : true, // append scripts to the main content element, instead of "eval"-ing them intevents: true, // intercept events that are fired only on classic page load and simulate their trigger on ajax page load ("DOMContentLoaded") style : true, // true = all style tags in the head loaded, false = style tags on target page ignored prefetchoff : false, // Plugin pre-fetches pages on hoverIntent - true = set off completely // strings - separated by ", " - hints to select out // debugging & advanced settings verbosity : 0, //Debugging level to console: default off. Can be set to 10 and higher (in case of logging enabled) memoryoff : false, // strings - separated by ", " - if matched in any URLs - only these are NOT executed - set to "true" to disable memory completely cb : 0, // callback handler on completion of each Ajax request - default 0 pluginon : true, // Plugin set "on" or "off" (==false) manually passCount: false, // Show number of pass for debugging DCLDelay: 0 };
Precautions
- When calling Ajaxify from within an inline script, please make sure, it is the only statement and definitely contains the following string:
"new Ajaxify("
…which avoids unwanted recursion - When calling Ajaxify from within an existing script, please make sure it has the identical path across pages
Setting alwayshints
You must specify any files to be loaded each time around by setting alwayshints or data-class=”always”
Optional visual effects
…then…
Public methods
Principally, you can access any subclass directly, if you know what you’re doing – the following are but a few examples:
Jump to an internal page programmatically:ajaxify.pronto(0, URL);
e.g.
ajaxify.pronto(0, "https://mysite.com/about");
Access the XHR object of the central fetch()
ajaxify.getPage("x");
Hi,
I’ve been playing with your awesome plugin trying to implement it on a squarespace 7.1 website I’m building for a webradio.
So the idea would be to have a persitent audio player for the radio on all pages.
Thing is I’m struggling to make it work, styles won’t load correctly, sometime content, or it will simply do nothing.
I’m not uber skilled with js so if you could help it would be amazing!
Cheers,
Fab
Hi Fabien,
Thanks for your interest in the plugin!
Yes, that is a classic use case for Ajaxify – making the music play across pages…
Sure I can give it a try…
First of all, do you have an exact URL to your test site? (If not top secret 😉 )
And which version of Ajaxify are you using?
We’ll go from there…
Thanks and regards,
Arv
Hi Arv,
Thanks so much for your answer. I would be very grateful for your help.
Right now I have this as a code injection in the header trying to ajaxify everything simply, which doesn’t work ;):
let ajaxify = new Ajaxify();
Played with different settings, trying to ajaxify only the radio player, or part of the website (then url will change in browser but page won’t load) or trying to ajaxify everything which would create problems loading content or styles or both.
url is: https://dia-radio.squarespace.com/
password is: mcforever
Cheers,
Fab
Sorry just saw my copy and past of script didn’t display in previous message.
this is the js i’m calling :
https://cdn.jsdelivr.net/gh/arvgta/ajaxify@8.1.5/ajaxify.min.js
Best,
Fab
Hi Fabien,
Thanks for all those details – just had a look.
My feeling says, that you won’t be able to get it working in this form – sorry.
The simple bits first:
https://cdn.jsdelivr.net/gh/arvgta/ajaxify@8.1.5/ajaxify.min.js
…is indeed the proper script to link to(the currently latest release and most stable version).
Your Ajaxify call:
let ajaxify = new Ajaxify();
…is fine as well for a start, to get Ajaxify going(will perform a full body swap), although you might want to try placing it far to the bottom of the page and not in the header. Also, you would want to refine it to swap only the desired elements, in order to achieve the effect you want to keep the music playing across page loads.
However, when looking at the source code of your homepage:
view-source:https://dia-radio.squarespace.com/
…it is obvious, that your site’s code is huge (2113 lines of code on the homepage)
I suspect, that it is bloated. For example – just sticking to Ajaxify issues, you don’t need the code from lines 44 – 77
(Inline script starting with:
// basic config parameters
)
Consequently, there is quite a lag when loading pages.
I would suggest you try to downsize the HTML as much as possible in any case…
Really sorry that I can’t help you any further.
Does the site work without Ajaxify enabled?
Thanks and regards,
Arv
Hi again,
This is the error I have, whatever i do it won’t change:
“Uncaught SyntaxError: Identifier ‘firstSection’ has already been declared”
Thanks for the help!
Best,
Fab
Hi Fabien,
that means that
firstSection
is being initialised more than once. If it is being initialised in an inline script, you might want to have a look at inlineskip.Something like:
let ajaxify = new Ajaxify({elements: '#block-yui_3_17_2_1_1633446709478_7891', inlineskip: "firstSection"});
But really, it is like looking for a needle in a haystack with so much HTML…
Sorry about that.
Thanks and regards,
Arv
Hey Arv,
Thanks for taking the time to look and for your help.
I’m fairly certain it’s possible to make it work, just something to adapt in the way Squarespace deals with javascript and loading content.
Could go with a wordpress, but for the end user, it’s so nice and simple to use in comparison that I really want to try and make it work.
Cheers,
Fab
Hey Fab,
alright, then I think a good starting point is to eliminate all the superfluous whitespaces in your HTML…
Thanks and regards,
Arv
Hi,
I am trying to build a static site with a webradio inside.
I follow the instructions for installation and interface and starting with the full body swap as suggested.
I would like to know whether there is a way to do the same but with some #id elements excluded from the body swap (for example excluding #navbar, #audiobar).
Is the class “.no-ajaxify” part of the issue ?
Thanks for this great plugin.
Hi,
Yes, webradio is one of the classic use cases of Ajaxify.
I suppose the full body swap worked for you?
You cannot exclude ID elements from the body swap but instead you can specify a “positive” list of IDs in the
elements
property.No, the class
no-ajaxy
does not apply to theelements
property.If you tell me which
elements
on your site you want to swap across pages, I can give you the corresponding code…Thanks for the swift answer.
Unfortunatly, the full body swap makes everything working except the radio bar.
I tried to select only few ids (#navbar, # footer, etc.) as indicated in the docs but no success.
I am trying to understand how to solve this issue and investigating if the script called by the radio is impacted by the ajaxifying.
Still under investigation. I probably has to revert to you, if I may.
Thanks again
Hi again and thanks for posting back!
As far as I understand, everything works in all scenarios, except the radio bar, no matter whether a full body swap or just certain elements?
Do you have a link to your site? (Maybe I could have a look?) If you need it to be treated discretely, please send me an email to arvgta@gmail.com and we can solve it in the background…
Of course I’m there at your disposal and thank you, too!
Can i load a particular section or content from a page using ajaxify? Not able to figure my way out.
Yes, of course. That’s one of the main purposes of Ajaxify.
You simply specify the ID of the content element like this:
let myAjaxify = new Ajaxify({elements: "#content"});
…replacing
"#content"
with the ID of the content element, that you would like to swap across internal pages…Hi, i’m new to JavaScript & Jquery. Can you please setup a very simple demo with few links and stuff. Not able to figure my way out. Help require.
Thanks!
Hi,
Yes, you have this site (4nf.org) or all the sites on the demos page.