Check whether internal link, real click and not target = "_blank"
Convert the ajax response in terms of format – as we want to extract the content elements only from the target page.
Add the page into memory if enabled
Preview the new page, if enabled
Check whether there is a hash in the original URL (special case)
Load any new scripts(inline/external JS, CSS, style tags) on the page (deltas to current page)
Load the target content elements into the current content elements
Load new title
Inform Google Analytics
60 thoughts on “Algorithm”
Is there a reason why a url like this…
Would get the numbers remove after the page redirect? Also gets removed from canonical as well? We’re using version 7.5.5.
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…
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
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?
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 🙁
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)
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.
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…
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
That’s great! Looking forward to the link, which I will treat discretely, if sent via eMail…
Concerning the async rendering, you might want to hook into these events, e.g.
Do you know, what I mean?
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.
I don’t know how marko js works.
Please send me a link via eMail and we’ll go from there…
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.
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 “
I’ll craft a new minified ajaxify.min.js as soon as we agree on the logic.
Thanks so much!
Thanks for your support.
Waiting for your minified version.
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:
(Please see interface -> “Public methods”)
Thanks ever so much, once again!
Thanks for providing the changes.
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.
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
typeattribute in all cases if given
typeis not “
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…
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.
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
3) The FOUT-effect after hooking into
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!
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.
How can i abort previous request if user click on another link before the response of previous link comes
your feedback is very valuable – you’re not bothering anybody!
I’m glad you got Ajaxify going – vastly.
At the moment, the
pronto.errorevent is raised if
You can hook into
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.
just to let you know that I have now changed
– If a
prefetchis in progress already, when the user clicks on the same link again rapidly, only one GET is performed…
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.
glad, you got the old issue to work.
Yes, I can emulate your new issue on https://4nf.org/…
Will take care of it asap!
Thanks Arvind for your support. 🙂
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)
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
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
pOfile 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
(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…
I need some more help. May i Know how ajaxify is handling meta tags like meta descriptions & meta keywords.
quite simple – they are left alone / not tampered with.
They will always have the state of the initial load.
Good news… We have implemented the ajaxify in our product makaan.com.
Thanks for all your support. 🙂
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!
i have a skin tath cover full body …
but qhen i change page, the page is without images, css, …
I don’t know, what you mean?
Please i have BIG problem:
in my pages have some ADV script with document.write …
how can solve ?
document.write()is a “no-go” in an Ajax environment.
Please use jQuery methods instead, like:
sorry but is indipendent the execution of ADV …
how can ?
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…
Yes message sending work wether dropdown not.
Now i have disable ajaxify now look it.
Yes, the difference is, that the drop-down for gender now works…
In the HTML, the only differences to the other fields I can see is:
and there is the class
Are both intended?
EDIT: I don’t know either, whether you intended to call Ajaxify with
deltas: false, if you would like to disable delta-loading… (i.e. an “s” is missing)
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.
have you removed the “
Yes Every no-ajaxy removed..
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!
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.
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!
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.
Thanks! Very kind of you!
Previously loaded pages ought to be in memory, which is enabled by default?
Yes i read it and updated but still my style.css not working
i dont know why …
I have set style =true but on ajaxify its not load
…is the default anyway
Yes i did it but still its not working .. i dont know why
styleparameter applies to loose “style” tags in the head, not to entire inclusion of style sheets.
How have you set the
deltasparameter? That has effect on CSS and script inclusion…
I recommend leaving
deltasto default (
true), because otherwise, you might have to do quite sophisticated stuff in the head, by foot…
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 .
Does the problem persist?
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.
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.