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

141 thoughts on “Interface”

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

  2. 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 Yagnik Cancel reply

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