Pass: 0

Interface

Jump straight to options

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

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

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

154 thoughts on “Interface”

  1. hi, i’m new and not jquery expert …

    my question:

    link to page2.html …

    but page2.html how as must be … with tag or not … with tag or not …
    thanks

  2. Hi,
    Its really an awesome plugin to use. Just one question, does it work with websites made of ASP.NET Web Forms?
    We tried a lot to make it work, with different parameters combinations, but no luck 🙁

  3. It seems my question disappeared. Sorry if I’m spamming you. I was just wondering how you pass variables to PHP? Can you provide a simple example? Thanks a bunch!

    1. Hi Howard,

      you can pass variables by parameters in the URL (and use $_GET() in PHP),
      or use a POST (and use $_POST() in PHP).

      In case of forms, there is the automatic form handling.

      Cheers and thanks for your interest in the plugin!

  4. Also how can I pass variables to PHP? For example if I have something like:

    $.ajax({
    type: ‘POST’,
    url: pageurl,
    data: { var1:’hello’, var1:’world’ },
    success: function(data) {
    $(‘#content’).html(data[‘content’]); // update content

    if(data[‘menu’]) { // update menu
    $(‘#menu’).html(data[‘menu’]);
    }
    else {
    $(‘#menu’).html(”);
    }
    },
    error: function(response) {
    alert(‘ERROR:’ + response.responseText);
    }
    });

    How would it look using your plugin?

  5. Hi!
    It’s awesome script to use. I implement it on my site. Site loads fine but when I get back on home page most of the other scripts didn’t work anymore.
    How can I recall those script again after page back?

    I keep in cb like this but only first one recall not all of them.
    cb : NavScroll, cqTestimonial, Quoteslider, PrettyPhoto, OwlCarousal,

    Thanks in advance for your helping 🙂

  6. Hi, I am trying to ajaxify tumblr blog. However tumblr uses tags like {PostTitle} to get and i am getting ” Syntax error- unexpected token } “. Whan can I do with it? Thank you for your help

    1. Hi,

      could you provide a link to your site, either here or via eMail(if you want it to be debugged discretely)?

      Thanks and
      Regards, Arvind.

  7. Thanks a lot. This plugin has done wonders for my site! One question though. How on earth do I set page titles. I cannot figure it out for the life of me.

    1. Hi,

      Ajaxify should pull the title you specify on the target page, in case you specify it inside the “title” tag.
      I can see, when visiting your site, that you dynamically update the title with document.title =
      That should work, too, if you have “inline” set to true (default).

      What’s very interesting about your site as well, is that you have Adsense working in conjunction with Ajaxify.
      Do you notice any side-effects?

      Thanks and regards

      1. Thanks. I eventually figured that out! I also learned that Google’s crawlers accept some javascript! As far as the AdSense goes, I set up Ajaxify so that it would not reload that bit of the page, so the ad is not actually changing. I have some ideas for making the ad change as well, but it would be a bit complicated. I am busy with some other projects at the moment, but I will start working on that when I have time. I think it’s pretty stupid that AdSense does not work on Ajaxified websites, especially since most of Google’s own sites (including Google Search, and YouTube) are Ajaxified.

        1. Hi Colton!

          Thanks for the reply! Glad you found out how to handle the title (dynamically).
          Very interesting that you agree that Adsense still doesn’t cooperate with Ajax.
          What makes the matter even worse is that Google doesn’t allow any kind of re-engineering of the Adsense code.

          If you do find a solution or workaround, please let me know, so I can enhance Ajaxify for others.
          Is it alright for you, if I include your site here: https://4nf.org/demos/ ?

          Cheers and regards.

  8. Hi every body,
    I’ve just discovered this plain which look like very promising! Thk so much for this.
    Unfortunately i could process any ajaxify action out of it.
    here my code :
    jQuery(‘#centre’).ajaxify({
    selector: “a.process”,
    requestDelay: 0,
    verbosity: 2,
    deltas: true,
    inline: false,
    inlinehints: “”,
    forms: true,
    turbo: false,
    previewoff: true,
    memoryoff: true,
    canonical: true,
    cb: null,
    pluginon: true
    });
    I attend to click on “a.process” and load in centre a new content with an ajax script.
    I was hoping to trigger ajaxify but it didn’t work out ?
    Any one see

    1. Hi Bronson,

      thanks for posting.

      There are examples here:

      https://4nf.org/examples/

      Your plugin call looks good. I think your usage of “selector” is correct:

      selector: “a.process”

      (Keep in mind, you don’t necessarily have to pass default parameters)
      You could downsize the plugin call to:

      jQuery(‘#centre’).ajaxify({
      selector: “a.process”,
      verbosity: 2,
      inline: false,
      turbo: false,
      memoryoff: true
      });

      What error are you getting in the console?

      Feel free to post a link to your site here!

      Regards

      1. Thks for your reply.
        I don’t get any message from console and a visitor just advise me he couldn’t load any more the site using Chrome (Win 7) and same with Chrome Mac OS X.
        Strange ? No ?

        Best regards

        1. Hi Bronson,

          a bit difficult to tell “in the dark”.
          You mentioned, that it already was an Ajax driven site beforehand.
          Maybe there is interference.
          Ajaxify turns a conventional site into an ajaxified site, so that it works with or without JavaScript…
          Drop us a link to your site, if not top-secret…

Leave a Reply to Bronson Cancel reply

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

Show Buttons
Hide Buttons