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

86 thoughts on “Interface”

  1. Hello,

    I was trying to understand how it works, but still can’t make it working. Of course I’ve added both jquery and yours ajaxify scripts to my html file, and used this: $(document).ready(function(){
    jQuery(“#content”).ajaxify();
    });

    But I still don’t know what should I put inside href attr in anchor tags.

    My file stucture looks like this:
    – index.html and /html dir in one directory
    – example.html inside /html directory.

    And now I want to put code from /html/example.html inside (which is in index.html). How my should look like? I’ve tried something like this: Example button, but it only changed my url to “…/html/example.html” – div #content is still empty.

    Thanks in advance πŸ™‚

    1. Sorry, didn’t know thath HTMl works in comments section πŸ˜› It wa supposed to be [a href=”html/example.html”]Button[/a] (ofc with instead of []).

      1. Hi,

        looks alright, and should work, provided you have supported the #content div/element consistently(across all pages)… Did you get it going in the meantime?
        If you have a link to your (test) site, I could see it (not) working and have a look at the console etc.

        Cheers!

        1. Here’s my test page: Page
          And code: Code

          Scripts are in index.html, url in a href is in sidemenu.html (in /html directory) and page to load is also in /html directory (example.html).

          1. Thanks for the link to your test page, which I had a look at.
            Your setup is alright, but there is one misunderstanding – you’re trying to use:

            • class="content"

            (twice)


            However, the content elements to be swapped have to be labelled by IDs, not classes.

            Looking at your test site, what should work straight away is if you change the jQuery selection to:

            $(document).ready(function(){
            jQuery("#sidenav, #preview").ajaxify();
            });

            You can then omit the:

            • class="content"
          2. Hey, thanks for your anwser. Ofc there was supposed to be #contentBox, not #content. Fixed it now and uploaded to my test page, but it still doesn’t work. I’ve also tried your suggestion with omitting .content class, but it’s not working too.

          3. Hey, as far as the #contentBox business is concerned – it looks fine.

            I suspect a timing problem, because you’re using a jQuery load() dynamically in here:

            Please try to make sure, that Ajaxify kicks in later than your load()

            EDIT: What you could try quickly is moving the following code down to the bottom of the body:

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

            …so it is enqueued later than the JS containing both of your load() calls

          4. Updated my page once again πŸ˜‰

            Unfortunately it still doesn’t work. I was also trying with removal of load function (so jquery and ajaxify are the only scripts), but still nothing.

          5. Ok, thanks for posting back. We’ll try hooking into the Pronto events then:

            Please try replacing this in your file:


            $(document).ready(function() {
            // default
            //$("#sidemenu").load("html/sidemenu.html .one");
            //$("#contentBox").load("html/default.html #content_default");
            });

            …with…

            $(window).on('pronto.request', function() {
            // default
            $("#sidemenu").load("html/sidemenu.html .one");
            $("#contentBox").load("html/default.html #content_default");
            });

          6. Ok, I think I found a problem. Could you check file “html/example.html” in my test page? I pasted there content to being loaded into div#content in index.html. But when I copied everything from index.html (but without “$(document).ready(function(){jQuery(“#contentBox”).ajaxify();});”) into example.html, then it almost worked. Element #content has been replaced and that’s great, but when I type url (/example.html) manually, then it just opens my example.html, which is not desired by me (since it loads entire page) How can I fix it?

          7. Hi,

            your test site is very simple. It is interesting, that it seems so hard to get it working.
            As mentioned before, the unique thing about it is that you’re pre-loading the content to be swapped dynamically.

            All I can do is illustrate a bit, which possibilities/instruments are available from an Ajaxify point of view:

            1. Place the call of Ajaxify towards the bottom of the page – we tried that
            2. Hook into the Pronto events – we tried that
            3. Use “alwayshints” – e.g. { alwayshints: "pages" } -> causes Ajaxify to load your pages file every time around
            4. Wrap the dynamic injection statements in a function, which you call from an inline script instead (on every page load)

            You can even try combinations of the above measures, as you like.

          8. I meant something else, because it already works πŸ™‚ Look here. When you click “Click here” in Nav Menu, content from example.html (i fixed it by adding both div containers around content to load in example.html) will be loaded into #contentBox inside index.html.

            I was asking about url. After loading content (by clicking “Click here”) try to refresh the page. It will show pure html code from example.html, while it should display index.html with loaded content from external file (like it is after clicking “Click here” in Nav menu). How can I fix it to have url working just like here (4inf.org)?

          9. I’m glad you got the swapping of content itself to work!

            Yes, I could reproduce the error you still have.
            I always try to debug by finding out the first thing, that is not expected.

            Therefore, may I ask, whether you really want the URL to be changed to:

            https://gitttf.github.io/Test/example.html

            (after the user clicks on “Click here”)

            ?

          10. No, it may be any url. I just wanted different URLs for every page, so I would be able to send a link to specific page if someone will need something from my webpage, without clicking through all the tabs (there will be a lot of tabs and subpages).

          11. Another thing came to my mind – there is a convenient switch of Ajaxify:

            pluginon: false (default: true)

            …with which you can softly disable Ajaxify and then verify, that your site is performing as you wish without the plugin being active…

            (wouldn’t be surprised, if your last issue arises just the same)

        2. Yeah, sure – without this plugin urls are not saved anyway. But it was the main reason I wanted to use this plugin. If I would only want to dynamically load the content, then jquery load function is enough to achieve that πŸ™‚

          1. I’m glad we agree that it performs more than a jQuery load()!
            Its policy is to work on an underlying and fully functional website for several reasons(a bit like an “overlay pattern”).

            So I would suggest to take one step back and to make sure, your site performs as you want it to without Ajaxify being active.
            Then you’ve got the full works explained throughout this site to enjoy the “ajaxified” variant. πŸ™‚

  2. Hello,
    Im getting this error.

    Uncaught TypeError: Cannot read property ‘attributes’ of undefined
    at _copyAttributes (ajaxify.min.js:1)
    at HTMLDivElement. (ajaxify.min.js:1)

    1. Hi there,

      thanks for reporting this error. It was reported before recently and I thought it was due to faulty user input.
      I will take it seriously this time!
      Might take a couple of days though, because I am off for a holiday.

      Could you please provide a link to your (test) site, if possible?

      Thanks and
      Regards

    2. Hi again,

      I’m back… If the bug persists, please give us a link to your (test) site for debugging.
      Otherwise I would presume, that you got it going…

      Thanks and
      Regards

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

    jQuery(“#contain_wapper”).ajaxify({
    refresh : false,
    prefetch:false,
    memoryoff:true,
    inline:false,
    style:true,
    deltas: true,
    forms:false,
    });

    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
      Regards

      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…

  4. 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
      Regards,
      Arvind

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

    thanks

  6. Very kind of you, thanks Arvind!
    I’ll be very glad to see my site lavocestonata.mayerweb.it 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
    ruggero

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

    Thanks,
    Martin

  8. 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 to Paul Cancel reply

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