Pass: 0

Algorithm

… in pseudo-code

What does this plugin do?

Algorithm

  • If the HTML5 History API is not defined for this browser – exit gracefully
  • Ajaxify all links specified by selector using event delegation)
  • For all of these links(greatly simplified):
  1. Prefetch the next page if prefetch is enabled
  2. Check whether internal link, real click and not target = "_blank"
  3. Convert the ajax response in terms of format – as we want to extract the content elements only from the target page.
  4. Add the page into memory if enabled
  5. Preview the new page, if enabled
  6. Check whether there is a hash in the original URL (special case)
  7. Load any new scripts(inline/external JS, CSS, style tags) on the page (deltas to current page)
  8. Load the target content elements into the current content elements
  9. Load new title
  10. Inform Google Analytics

68 thoughts on “Algorithm”

  1. Hi Arvind,

    reading the documentation, I understand that Ajaxify should detect and manage hash in the url.
    But when I’m building a page with some internal links leading to anchors, those links seems to trigger a reload of the main content of the page instead of scrolling to the specified anchor as expected.

    Is it normal behavior ?

    You can see the problem on the following development page:
    https://obscuramachine.com/futur/territoires/somme/st-christ-briost

    There are three faded links on the map that should link to specified anchors in the left panel on the page.

    Would appreciate any help to understand how to make it work.

    Best regards.

    Reply

    1. Hi Mathieu,

      Yes, that’s right – Ajaxify should definitely scroll to the ID specified after the hash.
      I double-checked, whether you have overriden the scrollTop option but you haven’t.
      So the so-called “smart scroll” should be enabled, that should scroll to the anchor.
      Very weird…

      I had a look at your test site as well, but don’t seem to be able to provoke the error?
      Did you get it going in the meantime?

      Thanks and regards,
      Arv

      Reply

      1. No, I didn’t fix the problem yet.
        The page should scroll to the “Port”, “Expo” or “Camping” section of the page but nothing moves over here.
        Never the less, when I inspect the code, I definitely see the #maincontent being regenerated each time I first click on one of the anchor’s links on the map when the url should be recognize as the same page and the content not be updated.
        I tried it on several browsers and operating systems without success.
        If it’s working for you. It’s really very weird.
        I continue my investigation…

        Reply

          1. That’s exactly the kind of behavior I would expect.
            Actually, as long as the link refers to the page we’re already on, Ajaxify could just do nothing and let the page scroll to the anchor as it would naturally in plain html.

          2. It’s been a while that I have touched that piece of code, but I believe that Ajaxify does that exactly, when a “pure hashchange” is detected.
            Could you please “measure” whether the anchor link I just seeded on the interface page invokes swapping of content or rathermore only a “jump”?

          3. Yes, it does.
            I can see the #sidebar and #content div’s being updated the first time I click on the “Jump straight to Options” link.
            Not just a scroll to the anchor.

          4. Alright thanks, I see. On the other hand it is difficult for Ajaxify to differentiate, whether a refresh of content is desired by the user.
            It is therefore “safer” to swap the content every time.

    1. Hi Paul,

      thanks for pointing that out. In any case, I was not aware of that issue.
      Will ask the guy, who is good at these things…

      Solved

      Regards,
      Arvind

      Reply

  3. Hi Arvind,
    Your plugin is awesome.
    I have some doubt in concept so please help me in understanding.
    I have 3 pages and having links to each other.
    Some common css is present on pages and some page specific css is there.
    Sometime it happens when i navigate from 1 page to the other all css request goes and some time on delta request goes.
    May i know is there something missing or my understanding is wrong

    Reply

    1. Hi Prashank,

      glad you like it 🙂

      The default settings are, that stylesheet-includes in the head are subject to delta-loading.
      Inline-CSS are all loaded each time by default.

      Do you have a link to your site?

      Regards,
      Arvind

      Reply

      1. Hi Arvind,
        Thanks for quick reply.
        All stylesheets are included via link tag.
        I can see the repeated request in devtools. Request status will we 304 for the next time but i think request should not be made while calculating delta.
        Our site is in development phase so can’t share the links 🙁

        Reply

        1. Hi Prashank,

          sorry about the inconvenience…

          Just two questions:

          1) Are all link tags in the head?
          2) Are those, that should be the same, syntactically identical?
          (there must be not the slightest difference in syntax)

          Reply

          1. Hi Arvind,
            We are using marko so our head section looks like this


            and page specific css gets embed into layout-placeholder

            so i think syntax is exactly the same.

          2. Hi Prashank,

            so they are all in the head and those that should be are syntactically the same..

            I have no idea then. Could you please send me the link to your dev page via eMail?
            I promise to treat it discretely!

            Otherwise, it is hard to tell…

          3. Hi Arvind,
            Thanks for your support. I will setup an environment and will share a link with you.
            Another problem that i am facing is
            as we are using marko js as a templating engine it supports async rendering so when i tried sync rendering it worked fine but when i used async rendering ajaxify is not working.

            Any solution to this one solution is i tried to render syncronously when the request is coming from xhr else rendered async.

            But this will compromise the power of marko js

          5. Hi Arvind,
            I am sorry i didn’t get you. When i am rendering asynchronously ajax response of new page is empty . May be that is the reason complete page is getting refreshed.

            Can you please elaborate or give some good link so that i can understand how to resolve this.

          6. Hi Prashank,

            I don’t know how marko js works.
            Please send me a link via eMail and we’ll go from there…

            Thanks!

          7. Hi Arvind,
            I think problem is with the semaphore. When we click on link and semaphore value is equal to the current url then you sre just returning from the click function and not preventing the default behaviour thats refresh is happening.

            Another thing i need some help actually i want ajaxify not to replace script tags having type = text/x-config because they are configuration tags. I think this is not yet available i have done some changes with regex but failed to indentify & replace the closing tag of that config script tag. so Another way to handle that.

          8. Hi Prashank,

            you’re brilliant – thanks for the hint!
            I’ve changed the semaphore handling in this file,
            and briefly tested it – please do the same!

            Regarding the second issue – I will give it try asap…
            (using the following rule:
            If script “type” is specified and not “text/javascript“, then just write out to the DOM without executing… What do you think of that rule?)

            I’ll craft a new minified ajaxify.min.js as soon as we agree on the logic.

            Thanks so much!

          9. Hi Arvind,
            Thanks for your support.
            I think logic is perfect if type is present and type attributes values is text/javascript than replace that with your divs else leave it.

            Waiting for your minified version.

            I am sorry if i am troubling you a lot. One more thing wanted to know is if there is any way by which i can navigate between page via ajaxify by using javascript not by using click events on html elements.

          10. Hi Prashank,

            my pleasure, you’re not troubling anybody at all – these enhancements are great!

            Performed the last change as well.
            Here is the minified test file.

            Yes, you can jump to a URL programmatically:

            jQuery().ajaxify("http://mysite.com/about");

            (Please see interface -> “Public methods”)

            Thanks ever so much, once again!

        2. Hi Arvind,
          Thanks for providing the changes.
          But the last change for not replacing the script tags having type attribute other than text/javascript is not working.

          I have made some changes in ld function for handling same case. I am replacing the .ajy-script tag have type attribute other than text/javascript to same script tag with the same type attribute.
          I know this is a work around but you solution didn’t worked out. It is replacing that complete script tag from the dom.
          If possible please update me if i am wrong.

          Reply

          1. Hi Prashank,

            Thanks for the rapid testing and feedback!
            Sorry for the misunderstanding!

            From what you’re saying is it possible that you would like the following functionality instead:

            – Preserve the type attribute in all cases if given
            – If type is not “text/javascript” then do not parse as an inline-javascript

            Right now, any other inline-scripts are being stripped out of the DOM completely – that’s right…

            Should we give the above logic a try?

            EDIT: Here’s a test file that may work better, I hope, with these changes…

            If it works, I’ll deliver a minified file asap…

            Thanks!

          2. Hi Arvind,
            It didn’t worked out. Ajaxify is still removing the inline script having type other than text/javascript. For the time i am using the workaround that i told you( check in ld function).

            Another problem i am facing is i have attached some functionality in pronto-render but what is happening html gets rendered and css is not present so FOUT comes into picture. Is there any way that i can make css as a blocking element for the html so that FOUT doesn’t occur.

          3. Hi Prashank,

            Thanks very much for testing, even though the result is rather embarrassing…

            So, we have three issues open:

            1) The semaphore bit – which has not performed well
            2) Inline-scripts other than type="text/javascript"
            3) The FOUT-effect after hooking into pronto.render

            Regarding issue #1, I have undone the semaphore approach and behaviour seems to be better…

            Don’t mean to be stubborn, but I might have made this mistake, when coding the solution to issue 2)
            Could you please test the modified file once more, as it would be a more generic and clean solution. If it doesn’t work again, we’ll leave it at your workaround.

            Finally, regarding issue #3, I suppose it might be worth a try to hook into some other Pronto event than pronto.render…

            Thanks a bunch for your patience!

          4. Hi Arvind,
            Thanks a lot for all your support. We have implemented your plugin in our site soon we will be launching it.
            I have some more queries:-
            1. how can i stop load and render events when error event has been triggered.
            2. And if for any link server responded redirect (301) than the content returned is of new redirected url. So how can we manage these scenarios.

            Sorry for troubling you a lot.

            Thanks
            Prashank

          5. Hi Arvind,
            How can i abort previous request if user click on another link before the response of previous link comes

            thanks
            Prashank

          6. Hi Prashank,

            your feedback is very valuable – you’re not bothering anybody!
            I’m glad you got Ajaxify going – vastly.

            At the moment, the pronto.error event is raised if _request() fails.
            You can hook into pronto.error.

            In case of a 404 error, please make sure that the 404-page contains the main content div, as Ajaxify will attempt to load the main content div nevertheless…

            I’m afraid there is no way at the moment to abort rendering, when another link is clicked very fast.
            That is obviously even more important in case of animations…
            Do you have an idea, how I could improve that?

            (in a multi-threaded environment, one could simply kill the main thread of execution from within the error path, but JS is single-threaded)

            Once you go live, I would love to list your use-case on the “Demos” and “Thanks” pages of 4nf.org.

            Thanks and
            Regards,
            Arvind

          7. Hi Prashank,

            just to let you know that I have now changed prefetch handling:

            – If a prefetch is in progress already, when the user clicks on the same link again rapidly, only one GET is performed…

            Thanks and
            Regards

      2. Hi Arvind,
        I figured out the issue and resolved the problem.
        Another problem i am facing is whenever i am having a link (anchor tag) pointing to the current page and i click on that whole site get reloaded.
        Any specific reason for this behaviour.

        Reply

          2. Thanks for your attention to detail and posting!

            I just had a quick testing session – the bug doesn’t throw an error and doesn’t seem to be trivial, I’m afraid. Might take a while to debug…

            In case you’re in a hurry, you could try spotting the reason at http://www.oeko-fakt.de/, where detailled debugging is enabled in the console…

            I presume, that Ajaxify crashes when clicking on the same link (just a guess)

        2. Hi Arvind,
          Sorry fro late response. I was out of station.
          That didn’t worked out so i moved on with my work around .
          Thanks for all your help
          May i know how you are minifying you code because simple minificatiopn didn’t worked out.

          And I encountered one more issue in minified file when i navigate by a anchor link from one page to another and then use browser back button to reach the same page after that i am unable to go back with the same link that is because code while checking that currenturl === h in rq function is returning true and then we don’t redirect it . This problem i am facing in minified file

          Reply

          1. Hi Prashank,

            thanks for posting back!
            I’m sorry about all this trouble!

            I had introduced the “pO” function to reduce the number of lines in the source code considerably.
            However, the downside of the approach is, that making a minified file involves several steps:

            1) Set the variable “codedump” in this file to “true” -> https://4nf.org/js/pO.js
            2) Minify the same file and dump it into where “//Minified pO() function” stands (instead of the embedded minified “pO” file)
            3) Start Ajaxify, preferably in Chrome – the code for the functions created by pO is dumped to the console
            4) Wipe out the above minified pO file out of ajaxify.js entirely
            5) Clean the generated code – there are some superfluous logging notes, generated by Chrome
            6) Exchange the original functions with the cleaned generated ones
            7) Add this line just before the Ajaxify sub-plugin
            – var fn = jQuery.getPage;
            8) Finally, minify the complete ajaxify.js file

            (I should really document the process above)

            Regarding the error with the back button, the way it reads is that the first mistake is, that the URL is not changed properly by
            _onPop(), when hitting the back button, right?

            I think you mean, when a “hash” is in the URL. Yes, the replaceState statement was missing – I’ve fixed it in this file… or this minified file at the CDN…

          2. Hi Arvind,
            I need some more help. May i Know how ajaxify is handling meta tags like meta descriptions & meta keywords.

          3. Hi Prashank,

            quite simple – they are left alone / not tampered with.
            They will always have the state of the initial load.

            Regards

      3. Hi Arvind,
        Good news… We have implemented the ajaxify in our product makaan.com.
        Thanks for all your support. 🙂

        Reply

        1. Hi Prashank,

          awesome site! I would like to include it on the Thanks + Demo pages. Could you tell me, which interface (Ajaxify call) you’re using? Thanks very much!

          Reply

  4. another problem:
    i have a skin tath cover full body …
    but qhen i change page, the page is without images, css, …
    how can?
    thanks

    Reply

  5. Please i have BIG problem:
    in my pages have some ADV script with document.write …
    how can solve ?
    thanks

    Reply

    1. Hi Stefano,

      document.write() is a “no-go” in an Ajax environment.
      Please use jQuery methods instead, like:

      html() or
      append()

      Reply

        1. Alright, you mean, that you have no control over ADV?
          If ADV uses document.write, then you’ll probably run into problems in any Ajax environment…

          Reply

  6. Yes message sending work wether dropdown not.

    Now i have disable ajaxify now look it.

    Regards,
    Amit

    Reply

      1. In the HTML, the only differences to the other fields I can see is:

        – placeholder= is missing
        and there is the class selectpicker additionally?

        Are both intended?

        EDIT: I don’t know either, whether you intended to call Ajaxify with delta: false.

        Should be deltas: false, if you would like to disable delta-loading… (i.e. an “s” is missing)

        Regards, Arvind

        Reply

        1. Now Back loaded Ajaxify and changed delta:false to deltas :false.

          I looked and identified that … its button event wont work
          Like in Bootstrap for selectpicker its display button and on click code work … so its wont work with our ajaxify.
          2nd thing I notice its menubar not working in mobile view.
          Again in bootstrap hamburger menu appear in mobile view .there is button again and its wont work.

          Like Button is not working in both casing may this will help to identify issue.

          Regards,
          Amit

          Reply

          3. Hi Amit,

            then I don’t know what else we could try, except for examining the DOM, after page load in the browser console?

            Sorry about that!

            Regards,
            Arvind

          4. No Problem Arvind,

            I have resolve issue with doing custom coding for button.

            but its some thing need to identify. i will do it and share with it if 100% regarding to plugins.

            So other cannot bare to solve this issue.

            Thank You very much for Support.

            Amit

          5. Hi Amit,

            that’s great! Would be splendid, if you could share your fix, yes…
            (are you a GitHub user? You could raise an issue at GitHub, for example)

            Otherwise you could describe your fix and I could document it straight on this site…

            Thanks for your patience with the plugin!

            Regards,
            Arvind

          6. Hi,
            Yes i will share fix. after completed my code with accurate fix.

            need to know how i can fetch previous loaded page without created acchual request to server ?
            is it possible with ajaxify.

          3. The style parameter applies to loose “style” tags in the head, not to entire inclusion of style sheets.
            How have you set the deltas parameter? That has effect on CSS and script inclusion…
            I recommend leaving deltas to default (true), because otherwise, you might have to do quite sophisticated stuff in the head, by foot…

          4. Plugins has issue with safari browser ?

            I have found something gilt, when i load site in firefox and chrome and load page ajaxify its load properly my sidebar.
            while same thing do in safari its wont load siderbar i have tried all posiblity but didnt succeed .

  7. Hi,

    thanks for the enquiry. IE9 does not support the HTML5 History API properly so it will exit then, gracefully degrading to normal. IE10+ supports the HTML5 History API and it will ajaxify on those browsers.
    It was a conscious choice not to procure e.g. Balupton’s history.js as it introduces many bugs.
    For example, handling of normal hashes in an ajaxified environment is impaired, which my plugin now supports.
    The plugin is not so much geared at backward support, but instead e.g. mobile phones, too, because I reckon and hope, that it’s best days are yet to come, when browsers and internet technology in general grow up to AJAX environments.

    Reply

  8. Hello,

    is it somehow possible to use the plugin in IE9?
    I’ve tried to load history.js, but no success. Plugin exits. Maybe I should another supporting script?
    Would appreciate any help.

    Reply

Leave a Reply

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

Show Buttons
Hide Buttons