Interface

jQuery interface

Pre-condition

Please make sure that the following calls are after/within the jQuery Ready event.

Full body swap

Interface

$(document).ready(function(){
jQuery().ajaxify();});

Ajaxifies the whole site, dynamically replacing the whole body across pages

ID selection

$(document).ready(function(){
jQuery('#content').ajaxify();});

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:
jQuery('#nav, #content').ajaxify();

The plugin can take an arbitrary amount of IDs

Setting alwayshints

From version 7.2.0 you must specify any files to be loaded each time around by setting alwayshints or data-class=”always”

Options default values

{
//	basic config parameters
	selector : "a:not(.no-ajaxy)", //Selector for elements to trigger swapping - not those to be swapped - e.g. a selection of links
	forms : "form:not(.no-ajaxy)", // jQuery selection 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
	previewoff : true, // Plugin previews prefetched pages - set to "false" to enable or provide hints to selectively disable
	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 : false, // 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
	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 : null, // callback handler on completion of each Ajax request - default null
	pluginon : true // Plugin set "on" or "off" (==false) manually
}

Optional visual effects

…then…

Public methods

Principally, you can access any sub-plugin directly, if you know what you’re doing – the following are but a few examples:

Jump to an internal page programmatically:
jQuery().ajaxify(URL);

e.g.

  • jQuery().ajaxify("https://mysite.com/about");

Access the XHR object of the $.ajax() call

  • jQuery.getPage("x");

97 thoughts on “Interface”

  1. Hello,

    First of all : congratulations for your work and thank you for sharing it !
    And, as i’m reading the comments, i’m truelly impressed how you manage to answer everyone for almost every kind of question.

    A part of that, i’m also coming to you because i met a strange problem 🙂

    As i met some random issue with the history (sometimes, it does not go back to the previous page) ; i have tried to investigate by using the no minified version of the js file.
    But so, i got an error as soon as i click on a first link :

    Uncaught TypeError: Cannot assign to read only property ‘tagName’ of object ‘#’
    at prop (jquery.min.js:2)
    at z (jquery.min.js:2)
    at w.fn.init.prop (jquery.min.js:2)
    at _isBody (:67:92)

    Altought i understand the meaning, i can’t figure why this does not came up with the minified version.

    Do you have some clue ?

    I’m using the last version (7.6.2) ;
    My initial call is :
    $(‘body’).ajaxify({
    prefetchoff: true,
    refresh: true,
    memoryoff: true,
    selector : ‘a:not(.no-ajaxy):not([href^=”#”])’
    });

    Thanks by advance,
    S.

    1. Hi Sébastien,

      instead of:

      $(‘body’).ajaxify({...});

      …could you please try:

      $().ajaxify({...});

      (in case of a full body swap, an empty main selector is expected)

      Thanks and regards,
      Arvind

      1. Hello Arvind,

        Again, i’m bluffed how quickly you answered ;

        Thanks for your advice ; i have try with an empty selector (i remove ‘body’) but same results.

        (error is with the not minified version).

        1. Hi Sébastien,

          thanks for all the kind remarks 🙂 Please keep the main selector empty for the course of our debugging…

          Here’s the answer from our tester:

          also tested this, with exact preferences that he uses on my environment, and everything is fine. I would like him to provide additional info, browser he uses and URL to his website if possible for further investigation. It is possible that he didn’t set up something properly.

          Thanks and regards,
          Arv

          1. Hi Sébastien,

            when you say, it happens only with the unminified file, which one do you mean?
            Could you please point us to it?
            Maybe we tested the wrong one?

            Thanks and regards,
            Arv

          2. Hi Arvin,

            Thanks to you and your tester for your time ;

            Sadly, i could not provide any url for further testing because the project is in a private network only (and i’m really sad to answer that).

            The not-minified file is the one going with 7.6.2 version mentionned in the bower.json file. (All are coming from the github).

            I have tried under linux with both Firefox and Chrome.

            I admit that maybe the most strange is that the behaviour is not the same between the ajaxify.min.js (wich work well) and the ajaxify.js.

            I will continue investigate ; the layout of the page is quite complex with lots of other scripts loaded so that won’t be easy 🙂

            I will also try to catch the $.log you smartly put into into the source so maybe i will figure more precisely where it hangs.

            Thanks again,
            S.

          3. Hello Arvind,

            I succeed in isolate the problem in the not minified file ;
            It seems that the script try to rewrite the tagName property of the body DOMElement (which is in read only).
            I commented that part of the code and it seems working now.
            I still can not figure why it does not fire error with the minified version (are both files sync ?).

            isBody: $t => {
            return $t.prop(“tagName”).toLowerCase() == “body”
            // i commented the next line, and now it works with not minified
            // && $.cache1().find(“#ajy-body”).prop(“tagName”, “body”)
            && (_ld($(“body”), $.cache1().find(“#ajy-body”)), 1);
            }

            Regards,
            S.

          4. Hi again Sébastien,

            thanks for the rigorous testing and I have forwarded your enquiry to Edin again…

            Regards,
            Arv

          5. Hi Sébastien,

            https://4nf.org/ajaxify.js

            I’ve commented out the code you suggested commenting out in that file as well.
            Also tested against this site. Works like a charm…

            I could imagine, that it actually depends on the jQuery version in use, whether a hard error is thrown.
            The bug was already in here:

            https://cdn.jsdelivr.net/gh/arvgta/ajaxify@7.6.2/ajaxify.js

            …possibly explaining, why there was so little feedback on the body swap option.

            I’m really grateful for your feedback. If you want to at some later point in time, I can list you on my demos and/or thanks page!

            I will let Edin test our new file in his environment and then probably create a new version…

            Have no idea, why the minified file works for you…

            Regards,
            Arv

  2. Hi I am currently in the early stages of developing a website and trying to use/learn this plugin. So far I am able to load my web pages in the target div, but the issue I am encountering is that when I refresh the page the navbar disappears. Since I am trying to use ajax to load my web pages, I have only placed the navbar in the index(homepage). Thank you.

    1. Hi Imran,

      Thanks for your interest in the plugin.

      You also need the navbar on all pages, otherwise it won’t work.
      Imagine a user entering your site via a sub-page instead of the index…

      Regards,
      Arvind

Leave a Reply

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