jQuery interface


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

Simplest plugin call


Place the following code anywhere you prefer

Ajaxifies the whole site, dynamically replacing the div with the ID ‘#content’ across pages

If several divs should be swapped, just specify their IDs like this:
jQuery('#nav, #content').ajaxify();

The plugin can take an arbitrary amount of IDs.  The last element in the selection, according to its order in the DOM is the main content element by default.

Setting maincontent

You can override the main content element by specifying e.g.

maincontent: "#content"

That is even obligatory, if the main content element is not the last / only element of the selection.

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 ajaxify - without being swapped - e.g. a selection of links
    maincontent : false, //Default main content is last element of selection, specify a value like "#content" to override
    forms : "form:not(.no-ajaxy)", // jQuery selection for ajaxifying forms - set to "false" to disable
    canonical : true, // Fetch current URL from "canonical" link if given, updating the History API.  In case of a re-direct...
    refresh : false, // Refresh the page if clicked link target current page

/* visual effects settings */
    requestDelay : 0, //in msec - Delay of Pronto request
    aniTime : 0, //in msec - must be set for animations to work
    aniParams : false, //Animation parameters - see below.  Default = off
    previewoff : true, // Plugin previews prefetched pages - set to "false" to enable or provide a jQuery selection 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
    idleTime: 0, //in msec - master switch for slideshow / carousel - default "off"
    slideTime: 0, //in msec - time between slides
    menu: false, //Selector for links in the menu
    addclass: "jqhover", //Class that gets added dynamically to the highlighted element in the slideshow
    toggleSlide: false, //Toggle slide parameters - see below.  Default = off

/* 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 : "leaflet-embed", // 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 div, instead of "eval"-ing them
    style : true, // true = all style tags in the head loaded, false = style tags on target page ignored
    prefetch : true, // Plugin pre-fetches pages on hoverIntent

/* 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

Animation parameters (aniParams)

Default ist false (set off).
You can turn them on, by setting aniTime and passing some parameters, that override these defaults:

These will only be applied to the main content div!

    opacity: 1, //no fade, set to 0 for maximum fade
    width: "100%", //in percent -  "100%" means no change
    height: "100%" //in percent -  "100%" means no change

Other animation parameters

You can specify any parameters that are understood by .animate()

Julien’s workaround in case of thrashing

Please see Julien’s issue and workaround
Synopsis: add the following setting

prefetch: false

Slideshow parameters

Please set idleTime and slideTime (in milliseconds)
Then please populate the menu and addClass parameters (described above)


Toggle slideshow parameters (toggleSlide)

Default is false (set off).
You can turn them on, by passing some parameters, that override these defaults:

{ //defaults - if not turned off completely
    parentEl: "#content", //parent element selector, where the image(s) below will be prepended - a different value might be e.g. "article:first" 
    imgOn: "", 
    imgOff: "", 
    titleOn: "Turn slideshow off", //title tag when on
    titleOff: "Turn slideshow on", //title tag when off
    imgProps: { marginLeft: "85%", marginTop: "20px" } //style attributes of img

Public methods

Jump to an internal page programmatically:

Access the main content div"g");

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

64 thoughts on “Interface”

  1. Hi,

    I used this ajaxify into my client’s website for navigate page without refresh and it’s working well but after the navigate to another page, loaded content repeated and then it showing properly.

    I used following code as per client need:

    refresh : false,
    deltas: true,

    so how can i fix it or what are the options need to put into above code?

    please suggest me

    Thanks in advance.

    1. Hi Yagnik,

      thanks for using the plugin and your enquiry!

      I trust, the parameters you’re using are what the client needs?
      Could you please elaborate on what is not working and maybe supply a link?

      Thanks and

      1. Thanks for reply

        The client only need to navigate page without refresh it and we used custom css and js into page that need to navigate using ajaxify.

        It’s navigate properly but if we client on menu than it redirect it to page without refresh but previous page content display first for a some seconds and than loaded navigated page.

        I need to fix this issue only.

        1. Hi again,

          the only useful thing I can think of is for you to play around with the parameters a bit, especially:

          • refresh
          • prefetch
          • memoryoff
          • inline

          It may be, that the combination of parameters you’re using causes problems…

  2. I have a requirement to refresh the current page where some data values (like some price data) would have changed on the server. I want the refresh to happen after a set interval in a way that the user browsing the page does not notice the refresh. The scroll position of the page should be maintained and also if the user is in the process of scrolling the page, the refresh should not interfere with the scrolling. Is this possible with your plugin (I have tried playing with it but I am not able to succeed)?

    1. Hi Paul,

      thanks for your enquiry and interest in the plugin.
      If you can wrap the price data in a div and give it an ID, that would be a good start.
      So you would like to set an interval programmatically and then refresh the mentioned data, without the user noticing?
      Obviously, you would have to set the timer yourself and then, when it fires programmatically call the click() function or try the following:

      jQuery().ajaxify(URL); //The new URL should contain the above div with the new price data from the server

      As far as the scrolling is concerned in your use-case, you might want to try setting:

      scrolltop: false

      Hope that helps a bit…

    1. Hi Snehanshu,

      Thanks for the interesting question!

      There are several beneficial differences, when compared to a normal page load:

      1) In a first step, only the HTML(text) of the target page is loaded, not all the associated resources.
      2) This first step is done via a same-site Ajax request, which is quicker than the normal approach
      3) The HTML of the target page is then compared to the HTML of the current one
      4) Only the differences and the associated resources are injected directly into the DOM.
      5) To speed things up even more, there are the “memory” and “prefetch” effects

      Don’t you see an acceleration of page loads, when using Ajaxify?

      What’s even more important than the speed of loading is the user-experience, which should be much smoother (through the above factors).

      Even more important than the user-experience, is that, from a developer’s point of view, the plugin takes care of routine Ajax tasks(i.e. is an Ajax framework) and he can focus on the site-specific bits.

      Thanks and

  3. hello admin,
    thanks for the great plugin , i want to add some animations when pages are changing something like slide in slide out or fade in fade out can you please help


  4. Very kind of you, thanks Arvind!
    I’ll be very glad to see my site among your demos, let me complete it, I’ll keep you informed: I manage other sites and my idea is to apply ajaxify to all of them.
    As regards the bounty, I’ll take a look, but don’t get your hopes up, may be you are overstimating me..
    Soon I’ll post a new question.
    bye Arvind

  5. Hello Arvind,

    I’m testing the newest version of the ajaxify and my links get triggered on hover. How can I stop this. I want my users to click on links in order to access pages.


  6. Ajaxify is not working with bootstrap for special onload classes.

    like i want to use selectpicker with ajaxify its doesnt work.

    Please help me to do it.

Leave a Reply

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