Interface

jQuery interface

Pre-condition

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

Simplest plugin call

Interface

Place the following code anywhere you prefer
$(document).ready(function(){
jQuery('#content').ajaxify();});

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.

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
    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
    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()

Slideshow parameters

Please set idleTime and slideTime (in milliseconds)

Toggle slideshow parameters (toggleSlide)

Default ist 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 above image(s) will be prepended - a different value might be e.g. "article:first" 
    imgOn: 'http://4nf.org/images/pinOn.gif', 
    imgOff: 'http://4nf.org/images/pinOff.gif', 
    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:
jQuery().ajaxify(URL);
e.g.
jQuery().ajaxify("http://mysite.com/about");

Access the XHR object of the $.ajax() call
jQuery.getPage('x');

54 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: http://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:

      http://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

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

Copyright 2005-2017, 4nf.org. All rights reserved.
Latest update: 22. August 2017