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 : true, // 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");

145 thoughts on “Interface”

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

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

  3. 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 Kumaran Cancel reply

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