51 thoughts on “ajaxify”

        1. Hi again,

          thanks for persevering!

          You’re including the plugin correctly. Additionally, you need something like this:


          …somewhere on all of your pages, as described here.

          Hope that helps…

          1. Thank you very much, I appreciate the time you took to explain. I think it works fine now, but I will have to replace some of my webpages because it don’t respond like it should on other webpage. Please take one more look if you don’t mind. Thank you in advance, you been a great help 🙂

  1. Hi Arvind
    my site http://lavocestonata.mayerweb.it is online and you can add it to Demos. It is not a great site, actually I use it as a lab in order to get acquainted with your plugin.
    scrolltop: false,
    turbo: false,
    style: false,
    aniTime: 500,
    aniParams: { opacity: 0, width: ‘100%’, height:’0%’ }
    Besides I use Pronto request/load/render to ajaxify third-party-extensions like Disqus comments (not yet perfectly stable), AddToAny socials, custom scrollbars etc, as well as to control the loading gif functioning.
    If you like details I’m at your disposal.
    If you find bugs or errors or misunderstandings about your plugin usage please let me know.
    bye Arvind
    ps: in the future may I contact you via e-mail?

  2. Thank you Arvind, you are generous, but I feel quite gratified by your kindness and support and collaboration on your plugin, that will help me a lot!
    By the way, I’ve another question for you..
    I’m encountering some difficulty in using “selector” parameter:
    I tried it with a menu link, but then all the links lost ajaxify.. think I misunderstood something.

    1. Hi Ruggero,

      as you wish – thanks! The selector property determines, which links are to be ajaxified.
      These can be outside of the content div(s). By default, all links on the page are ajaxified, except those with the .no-ajaxy class.
      I would leave it alone, if I were you…


      1. Hi, Arvind
        yes I agree.
        What about inserting an animated loading gif to show while the ajax request is running and to hide after it has loaded?
        I’ve done this using pronto.request to show and pronto.load to hide, it works.
        Perhaps you could add a parameter or a simple tutorial.
        Let me know.. bye

        1. Hi Ruggero,

          good idea – thanks! Will do, yes.
          It has been suggested to me before.
          A sort of progress indicator, or as you say an animated GIF?
          Show on pronto.request and hide on pronto.load.
          All built into the plugin by default…
          I could try to introduce another parameter, yes.
          That would be a JSON with a couple of parameters…

          A question that comes to my mind is how the user can specify, where to show the animated GIF?

          Thanks and

          1. Hi Arvind
            a little markup is needed in the index.php file of the template, something like this:
            then in the js file:
            jQuery(window).on(‘pronto.request’, function(event, eventInfo){
            jQuery(window).on(‘pronto.load’, function(event, eventInfo){
            I hope I will be able to put my site online tomorrow, I’ll advise you.
            ps: where are you from? I’m from Rimini, Italy.

          2. Hi Ruggero,

            thanks for elaborating on the new feature!
            I thought, we would like to build it into Ajaxify?
            (I would begin with that next week if that’s alright?)
            Looking forward to the release of your site…

            I’m from Munich, Germany – greetings!

            Thanks and

  3. hi Arvind, sorry for below verbosity..
    You probably already noticed I’m using Joomla as cms platform.
    It means that I may use third parties joomla extensions, that often cause conflicts and malfunctions when using ajax. Sometimes I can manage, some others I cannot and I must give up and find another solution.
    Also your plugin coused issues (social buttons and comment system) but it does not mean at all that it depends on your plugin bugs. At the moment that extensions are simply disabled, I’ll take care of them soon and I’ll keep you informed about eventual bugs.
    By the way, your comment system seems to work fair.. any suggestion?
    I think you should release the new version now, it contains an important fixing.
    bye Arvind

      1. Hi Ruggero,

        I am very grateful for your feedack, especially pointing out the bug with the main content div!
        I’ve mentioned you on the Thanks page.
        If you use Ajaxify for your site, I’d love to list it on my demos page.
        Finally, you qualify for the bounty of €100, if you like, because of the severity of the bug you helped kick out…

        Let me know, if you’re interested, please…

        Thanks again and

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

          1. Hi Ruggero,

            looking forward to the completion of your site(s). Thanks for contemplating to use Ajaxify on them!
            As far as the bounty is concerned – you’ve already earnt it! You don’t have to do anything else…
            Please eMail me from your eMail-account you submitted here and I’ll be happy to pay you via PayPal!


  4. Hi Arvind
    I didn’t find the reply button on your last post, hope you can see this anyway.
    I tested the new version and noted a strange behavior:
    when maincontent is set to false the job is correctly done (yeah!!), but if I set it to “#content” the menu links do not work any more (firebug does not report any error). Let me know.
    By the way, thanks for your (exaggerated) compliments.. I feel gratified 🙂

    1. Hi Ruggero,

      Thanks for your very positive post and patience!
      I see what you mean, yes.

      It seems to work when I change .find to .filter, like this:

      cd = maincontent ? p.filter(maincontent) : p.last();

      …at least on 4nf.org

      Could you please give it another try?

      Thanks and

      1. Hi Arvind
        I’ve just tested and noticed that now it works with both settings (maincontent: false & maincontent:’#content’), there seems to be no difference. You can take a look to my site, now maincontent is set to false.
        Let me know

        1. Hi Ruggero,

          thanks very much for the test, big relief!
          Same at 4nf.org, yes.

          Would you like me to create a minified file in the next step?
          (this is such a major change, so that I’ll create a new version altogether)


  5. hello
    I’m a little maniac about ajax and could realize 2 full-ajaxed sites, but in a very rude and messy way (they do the job, anyway).
    Today I came across your plugin and got interested, so I started testing it in a site of mine.
    It works, but I’m facing some problems like this:
    after clicking on a menu item link the “current active” classes remain on the previous item. Normally I solve with a code like this:
    “jQuery(“.navigation li”).each(function(index, element) {
    jQuery(this).removeClass(“current active”);
    jQuery(this [i.e. navigation item clicked]).parent(“li”).addClass(“current active”); “,
    but how can I add it?
    If I add the selector “navigation” to ajaxify, together with “content”, the issue is solved, but animation works only with “navigation”, not with “content”, dispite the sequence I write the 2 selectors.
    The link to the site: http://lavocestonata.mayerweb.it
    Thanks a lot for your patience
    All the best

    1. Hi Ruggero,

      thanks for your interest in the plugin!
      Did you get it working in the meantime?

      Please make sure, you’re using this version of Ajaxify
      Have you tried hooking your menu logic into the Pronto events?
      Are you using the built-in animations? Yes, these are applied only to the first div in the selection only.
      So you can specify several divs to be swapped, but only the first div will be treated as the main content div.


      1. Hi, thanks for your kind solicitude!
        I could manage using “Pronto” with this code:
        jQuery(window).on(‘pronto.request’, function(event, eventInfo){
        jQuery(“.navigation li”).each(function(index, element) {
        jQuery(this).removeClass(“current active”);
        jQuery(window).on(‘pronto.render’, function(event, eventInfo){
        var path_page = window.location.pathname;
        var path_page_trimmed = path_page.replace(/\s+/, ”);
        jQuery(“.navigation li a”).each(function(index, element) {
        if(jQuery(this).attr(“href”) == path_page_trimmed){
        jQuery(this).parent(“li”).addClass(“current active”);}
        It’s a little complicated, but does the job (any suggestion will be much appreciated).
        What I cannot understand is the matter regarding “the main content div”: I write “jQuery(‘#content,.navigation’).ajaxify({.., but the animation is always applied to “navigation”, instead of “content”, that’s what I want. With the above snippet I could bypass the issue, not solve it.
        Thanks again, I suspect I’ll write again here..
        Best regards
        ps: my site uses the address you gave me, i.e. “https://cdn.jsdelivr.net/jquery.ajaxify/6.5.1/ajaxify.min.js”

        1. Hi Ruggero,

          just a quick reply –

          .navigation is a class not an ID. That might lead to undeterminable behaviour.
          I thought you were using two IDs like:

          jQuery(‘#content, #navigation’).ajaxify({..

          …in which case the first one should take the role of the main content div.
          Could you wrap the navigation bit in an ID instead?
          (Ajaxify uses the jQuery first() method – if that fetches the first element according to the order in the DOM, instead of the first named element that would be a bug…
          I have raised a thread on how .first() works at the jQuery forum)


          1. I forgot to tell you I’d already tried that solution adding an ID to navigation div, now I’ve just tried to wrap it inside a new div with ID, without success.
            So I moved the navigation block below the content block and it works:
            it seems to be just a matter of “the order in the DOM”, as you said, i.e. a bug.
            Waiting for good news.. thanks

          2. Hi Ruggero,

            thanks for your sharp thinking. That’s rather embarrassing indeed 😉
            Do you know, how to fetch the first element of a selector instead of the first one in the DOM?
            I will ask in the jQuery forum as well…

            On the bright side, I think that can be patched easily, in a new version of Ajaxify.
            If it is impossible to fetch the first div, then I could add another parameter:


            …or similar, which specifies which index of the main content div is (e.g. 0, 1, or 2)

            What solution would you suggest?

            I’m really glad that you pointed out the bug!

            Or maybe it would be more straigth-forward to specify e.g.:

            contentdivid: 'content'


            Thanks very much and

          3. Hi Ruggero,

            I have created a new version with the following logic:

            cd = maincontent ? p.find(maincontent) : p.last();

            which should work in your use-case whether you specify maincontent or not.
            Feel free to test!

            Default for maincontent is false, useful values are e.g. "#content"

            Thanks very much and

    1. Hi Abu,

      thanks for your enquiry!

      I have no idea, because I’m not acquainted with requireJS…

      EDIT: Just had a look – it seems to be a library loader. What are the pre-requisites for Ajaxify to be loaded with requireJS?


          1. looks fine to me – you’re loading the two divs with those IDs dynamically…
            What does the console say?

          2. Latest code:

            Console shows no error, I also increase verbosity.

            My application is menu base application, when I click a menu/link the content of div id=”userMainContent” will change. Current situation is content are changing on menu click, but JS of those corresponding content are not working from second time.

  6. Love the plugin — just starred it at Git. Browserstate Ajaxify was giving me a lot of problems… Two issues: For some reason I can’t get the pages to stop sliding. I only want to fade between pages. Thanks for any insight.

    1. Hi Paul! Thanks for the very positive feedback and glad you like the plugin!
      Thanks also for the star!

      Sure, what did you specify in:

      aniParams ?

      It ought to be something like this, if you only want a fade and no sliding:

      aniTime: 400 //in msec – time in milliseconds for the transition
      aniParams: { opacity: 0 }

      Please see also: http://4nf.org/interface/#aniParams

Leave a Reply

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

Copyright 2005-2017, 4nf.org. All rights reserved.
Latest update: 9. February 2017