34 thoughts on “Delta-loading”

1. Hello,
   First of all thank you for your great plugin.
   I have installed your plugin on my test radio website (https://naquema.com/ipsos) but I have the following problem.
   I have a list of recent tracks that refreshes every 60 seconds by making a request to an external recenttracks.js file.
   It works fine without ajaxify enabled and when I enable ajaxify it works fine the first time I load a page.
   But after navigating through the website (go to a page and then back to home for example) it stopped working.
   So I added alwayshints : “recenttracks.js” and now it works and the list is loaded every time.
   BUT (and here is the problem) now after making at least one navigation it starts making a lot of requests to that recenttracks.js file and not respecting the 60 seconds timer.
   I can’t have so many requests made every minute or else my radio server will crash.
   Any ideas of what is causing this?

   Reply

   1. Hi Rodolfos,

      Thanks for your interest in Ajaxify and your enquiry.
      (For some reason, the WP notification landed in my ads folder – sorry)

      I had a quick look at your nice site – there seemed to be 4 errors in the console immediately, when loading your home page.
      It’s a good idea to get rid of any non-ajaxify errors, you can debug easily, for a nice and clean installation for Ajaxify to work on.
      (Otherwise difficult to assess, where the errors are coming from)

      Yes, alwayshints is there for files that should be loaded each time around, if that’s what you want.
      You can see it working on 4nf.org or http://www.oeko-fakt.de.

      It would be great to find out, whether what you’re describing is a problem within Ajaxify or just your use case…

      No, I don’t have an idea straight away…
      However, one of our partners had complained about alwayshints not working properly in the plain vanilla Ajaxify version as well.

      Do you have any new findings in the meantime?

      (I have opened a GitHub issue on the topic)

      Reply

      1. Hello,
         The problem appears only when I enable the ajaxify plugin and only when I make at least one navigation through the website (the first time you land on the homepage there is no problem).
         That is why I thought it has to do with the ajaxify plugin.

         The 4 errors in the console where from the player. I disabled the player and now there are 0 errors when you load the website. But problem remains.

         In the network activity I see random and many more than usual requests being made (around 10 per minute when the correct is exactly 1 per minute).

         I am still looking into it and I will keep you informed.

         Reply

         1. Hi again and thanks for posting back!

            I understand that you are intending to give the debugging a go yourself?
            Thanks very much!

            Here, at least is the salient code at GitHub of the newest unminified Ajaxify version.

            What comes to my mind as well:

            The behaviour you’re describing might also be explained by unwanted recursion, especially, if it exacerbates at run time?
            (EDIT: Just checked your Ajaxify call and it looks fine…)

            Please let me know, if I can be of any assistance?

            Reply

            1. Thank you for your fast replies.
               I think i figured out what is causing the problem:
               Everytime I navigate with a click through the website the recenttracks.js is being called once for every click because of the alwayshints.
               Which is good but I think this causes to start a different timer each time the .js is called.
               So e.g. if I clicked through 3 pages it will now call 3 times the .js file plus the time it was first loaded. So 4 calls every minute – instead of one.
               So when i click on a link and the .js is reloaded, I want somehow to unload the previous .js so that the timer (of the previous one) stops.

            2. Glad you found it out. No need to modify Ajaxify code then…

               Just a suggestion: You could take advantage of the fact that variables are persistent across page loads when your site is ajaxified and do something like this:

               if(currentTimer) clearTimeout(currentTimer); //Clear old timer if set
currentTimer = setTimeout(...); //Set new timer

               If you get your site going with Ajaxify to your satisfaction, I would be more than happy to list it on the Demos page…

            3. I don’t know how to reset the timer.
               Also I don’t understand the difference of reloading the .js with ajaxify and reloading the .js by refreshing the browser.
               Because by refreshing the browser, the timer resets. Does refresh flush some kind of memory?
               Keep in mind
               Of course I would like my website to be at the demos page when it is ready.

            4. *Keep in mind that my coding level is limited

            5. When refreshing the browser you initiate a hard page refresh. Yes, everything is reinitialised including Ajaxify and most probably, the music you’re playing will be as well or at least flicker, which is not what you want in the first place.

               Concerning timers – have look at this

               setTimeout

               OR

               setInterval

               Which JavaScript function are you using to set the timer and do you control the file you are triggering every time in alwayshints?

               EDIT: I suppose it is this file that you’re hinting at with alwayshints.

               It uses setTimeout().

               Please have a look at the reciprocal function clearTimeout

            6. Yes, that is the file but I have no control of it and I can’t edit it.
               Where should I put the setTimeout() method?
               Should it look something like this?

               
function myStopFunction() {
clearTimeout(setTimeout(function(){a.poll_all()});
}


            7. Thanks for letting me know, that you do not have control of the file.
               That’s a tough one then.

               If

               a.poll_all()

               …is the only function you need to call I suppose you can try triggering it in an inline script, instead of using alwayshints?

2. Hi Arvind,

   I’m continuing to try and get this working alongside Woocommerce again so have a quick question regarding the delta loading of the scripts.

   Is there any way to instruct new scripts to be loaded after the body tag instead of the head?

   Woocommerce is very picky with regards to placement of them and by default, a hard page load / refresh places them all after the body tag.

   Thanks
   Matt

   Reply

   1. Hi Matt,

      Thanks for your perseverance and effort!
      If you’re primarily talking about external JS scripts, there now is the possibility to label them with the “defer” attribute.
      You could sneak preview the coming version…

      Just an idea…

      Thanks and
      Regards,
      Arvind

      Reply

      1. Hi again Arvind, Yeah.. still plugging away and determined to get it working. All the other Ajaxify scripts out there aren’t anywhere near as comprehensive as yours, hence my wanting to stick with it.

         Thanks for the headsup and pointer towards the new version. I’ll certainly give it a go and would be good to keep up with the latest version. Is there any documentation to highlight what the latest features are?

         Thanks in advance & keep up the good work!
         Matt

         Reply

         1. Hi Matt,

            Thanks for those kind words – exactly, what keeps an open-source author going 😉
            The new features of the new version are not yet documented but I can name them here:

            – “defer” attribute supported (are you in control of the scripts in question?)
            – WP-Admin links no longer ajaxified (those e.g. in the “meta” section of a WP-site)
            – some source code formatting and a small simplification of code – no functional difference

            So, if you’re in control of the respective script inclusions, we might be in business!

            Thanks,
            Arvind

            Reply

            1. Hi again, Matt,

               even if you don’t control those scripts, I would still have an idea how to enhance Ajaxify for your use-case…

               Thanks,
               Arvind

            2. Hi again Arvind,

               Have just downloaded the latest version and will try and get it integrated into my demo site over the next few days.

               Would certainly value your input on a few things that I’d like to try and iron out. Generally though it’s looking promising so far and the pronto events will certainly help with page to page transitions.

               Thanks
               Matt

            3. Hi Matt,

               sure – I have time throughout the next days, will be off for the evenings.
               We can try debugging from tomorrow on. If you wish, we can switch to eMails for more rapid development…
               Whatever you prefer…

               Thanks
               Arvind

3. Hi,

   Thanks for Great Plugin, I have working it and found little problem.

   doesnt identify how to solve it.

   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.

   Once Again Thanks
   Amit

   Reply

   1. Hi Amit!

      I would need further details or, if possible, a link to your site, to see what you mean?

      Thanks!

      Reply

      1. Yes Please Lookat this link :
         http://demo3.wp-coders.com/amf/

         then click on Sign Up

         Regards,
         Amit

         Reply

         1. The sign-up process doesn’t seem to work. Is that the issue we’re talking about?

            In here, you’ve set
            forms to false – so the form should not get ajaxified…

            There is an error in the console, saying, that “font-awesome.css” is not getting loaded?

            Reply

            1. Yes I dont want to form ajaxify because i already handle it with ajax request.

               problem is there is male female dropdown.. when I remove ajaxify from page.

               its working fine.

               but when use ajaxify then that dropdown not worked.

               Amit

            2. Could you try removing the no-ajaxy class? Just a quick idea.
               With forms set to false, Ajaxify should not do anything, really, but we could try that…

            3. Hello

               Removed no-ajaxy class..

               look it once ..

               then will remove ajaxify.js then will check it again.

               Regards,
               Amit

            4. It said: “Your message was sent successfully.“, although I was not able to select the gender, leaving it as “male” – don’t know, whether Ajaxify was enabled or not

4. Gotcha, I understand that this is probably not necessary for many users.
   I ended up just changing the if statement in the _freeOld function to this:
   if (s[i][1] == 2 && s[i][0] && s[i][0].search("typekit") < 0) _removeScript(s[i][0], PK);
   I didn’t want to run the javascript again I just wanted to keep the it created.
   This is maybe a bit of a hack but it’s working good for me so far.
   Thanks for your help!

   Reply

   1. Hi Andrew,

      so you derived your own version of Ajaxify – cool 🙂
      Well done!

      Best of luck!

      Reply

5. Hi,
   This plugin is awesome!
   I’m having one problem. I’m trying to use Typekit which doesn’t allow you to link directly to the font, you have to use an embed script which attaches a style tag to the head that links to the font. Is there a way I can have Ajaxify leave that style tag alone instead of offloading it when a new page is loaded?

   Reply

   1. Hi Andrew,

      please try:

      style: false

      Thanks and good luck!

      Reply

      1. Yeah I should have mentioned I already tried that. I’ve also tried inline set to true and false and also put “Typekit” in inlinehints.
         Above it says:
         “CSS’s and scripts that are genuinely old to a page (page-specific) will be unloaded dynamically.”
         Since the Typekit styles have been generated for the current page only it seems like they would be “page-specific” and unloaded.
         I can see in web inspector that the style tag disappears when a new page is rendered.

         Reply

      2. Hi Andrew,

         thanks for your detailled answer and thorough research!

         Here some quick feedback:

         – inline pertains to inline scripts only (i.e. inline JS)
         – you need to turn on style handling, in order to achieve, what you would like to do!
         – the usual “delta-loading” does not apply to style tags – they are handled differently:

         1) Fetch all style tags from the target page
         2) Delete all style tags from the head
         3) Append style tags from the target page to the head

         You’re right – this means that style tags from older pages are lost!

         What would you expect from a user’s point-of-view instead?
         I’d be happy to overhaul the style handling for you and future users…

         From what you’ve posted, I reckon, you would like the following to happen instead:

         1) Fetch all style tags from the target page
         2) Compare with the “history” of style tags
         3) Append new style tags to the head
         (keeping a “history” of style tags)

         Just two more questions:

         – Does everything work, when Ajaxify is disabled?
         – What is the behaviour of “Typekit” then – does it generate the style tags for all pages?

         Thanks very much again!

         Reply

         1. Hi,
            Thanks a lot for the info and help!
            I will answer your two questions first.
            Everything works when I disable Ajaxify.
            Yes Typekit generates style tags for each page. It works differently than some web fonts in that you don’t link directly to the stylesheet, you just include some javascript which does some feature detection and then attaches the link to the font. So yeah, I don’t actually have the link in the head on every page just the script.

            Yeah I think your solution would be great!
            My problem is specific to Typekit, but I imagine there would be times a user would want to leave a link alone especially if it involved making a request to a third party server.

            Reply

            1. Hi Andrew,

               slept over this issue one more night. I think, I won’t implement the change, because in the current form, the algorithm reflects what probably most users would expect.

               What came to my mind: Could you please make sure, that Typekit runs before Ajaxify kicks in?
               If it’s the other way around, i.e. that Ajaxify runs first, the behaviour you reported is understandable…

               You also mentioned, that it’s a piece of Javascript that creates the style tags. In that case you need both style: true and inline: true or if that JS is the only one you’d like to trigger then inlinehints set…

               Thanks!