Interface

Preface

Interface

  1. Please choose and implement a method of installation first
  2. Then choose and implement a method for calling Ajaxify as indicated below

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

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
	bodyClasses : false, // Copy body classes from target page, set to "true" to enable
 
// 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
	inlinesync : false, // synchronise inline scripts loading by adding a central tiny delay to all of them
	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
};

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

154 thoughts on “Interface”

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

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

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

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

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

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

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

          5. Hey Fab,

            alright, then I think a good starting point is to eliminate all the superfluous whitespaces in your HTML…

            Thanks and regards,
            Arv

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

    1. 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 the elements property.

      If you tell me which elements on your site you want to swap across pages, I can give you the corresponding code…

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

        1. 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!

  3. Can i load a particular section or content from a page using ajaxify? Not able to figure my way out.

    1. 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…

  4. 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!

Leave a Reply to Fabien Cancel reply

Your email address will not be published. Required fields are marked *