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

119 thoughts on “Interface”

  1. Hi,

    I am trying to implement ajaxify in my site. The audio player is working fine on initial page load. However, after the ajax page update, can not add tracks from the new page. Please see the link below:

    Your help is much appreciated. Thanks.

    1. Hi Seyon,

      when I click on your link, I get a hard warning, that your site is very insecure.
      (Therefore, I have deleted it)

      I would fix that first.

      Thanks and regards

        1. Hi Seyon,

          the link works now, thanks!

          When I start a song and toggle between pages, it seems to work as well.

          If you would like to play it safe, you might want to use a real domain instead of the numbers?

          Maybe you got it working in the meantime. (I can only see an error because of the favicon in the console)

          Regards

          1. Hi,
            Thanks for looking at the page.
            My problem is that I can add tracks to the playlist on the first landing page. When I toggle to another page, the player persists with the tracks added from the previous page. But I can not add more tracks on the new page. You can click the playlist icon to expand the playlist to see what I mean.
            Sure, I will change to the real domain name, when production-ready.

          2. Hi,

            It seems you’re working on the site quite a lot (can’t get a stable impression of what you’re describing).
            I suppose everything is fine when Ajaxify is disabled?

          3. Hi,
            When you open the page, you are landing on page 3.
            Do not add any tracks.
            Toggle to page 4.
            Now try to add a track, it is not working. When I turn off the Ajaxify, everything is Ok. It seems that the inline javascript is not working after ajax page load.

          4. Hi,

            yes, I agree that it is the inline script, that is not loading on subsequent loads.
            It might just be due to the fact, that you are waiting for the ready event.
            When Ajaxify is active, the ready event is not fired on further page loads.
            Instead, you can hook into the Pronto events(please see the docs)…

          5. Thank you for that.
            However, I have hard time hook the events to the pronto. Could you please provide me some example code or example site. Thanks again.

          6. Hi,
            I am really sorry to be a bother. I have tried many things with no results. I would appreciate your help. The following script is the one to be wrapped in pronto script. Please advise me how would I do that.

            ...

            Thank you very much.

          7. Try putting the whole inline script in an external file (without the check for the ready event).
            If it doesn’t work straight away, specify a suitable hint in alwayshints

          8. Sorry but no luck.
            If I take document ready function, the playlist does not load at all. I tried to wrap the code in $(function(){….}, still the same issue. Once I move out of the landing page, I can’t add any tracks to the player.
            Sorry, I know I am bothering you enough.

          9. The real problem is that I’m out of advice, sorry.
            It might be something within the inline script – but I don’t know…

          10. Thank you very much for the time and patience so for.
            I will keep you posted, if I ever find an answer.

          11. Hi,
            I haven’t found a solution yet. Do you think, you can work on this as freelance basis, if you have ftp access?
            Please let me know.
            Thanks.

  2. Hi Arvind,

    Sorry for my late answer ;

    That was truelly gratefull enough to bring a very small piece to your work ;

    Now i can investigate on my original problem ; time to time, when i browse back, it does not go to the page it must be.

    I will keep you in touch 🙂

    Have a nice day,
    Sebastien.

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

  4. 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 to Martin Cancel reply

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