Preface
- Please choose and implement a method of installation first
- Then choose and implement a method for calling Ajaxify as indicated below
Full body swap
let ajaxify = new Ajaxify();
When no value for elements
is specified, ajaxifies the whole site, dynamically replacing the whole body
across pages.
(Might be a good starting point)
ID selection
(Allows you to specify the elements that you would like to be swapped only)
let ajaxify = new Ajaxify({elements: '#content'});
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:let ajaxify = new Ajaxify({elements: '#sidebar, #content'});
The plugin can take an arbitrary amount of IDs
Options default values
{ // basic config parameters elements: "body", //selector for element IDs that are going to be swapped (e.g. "#el1, #el2, #el3") selector : "a:not(.no-ajaxy)", //selector for links to trigger swapping - not elements to be swapped - i.e. a selection of links forms : "form:not(.no-ajaxy)", // selector 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 scrolltop : "s", // Smart scroll, true = always scroll to top of page, false = no scroll scrollDelay : false, // Minimal delay on all scroll effects in milliseconds, useful in case of e.g. smooth scroll bodyClasses : true, // Copy body attributes from target page, set to "false" to disable // script and style handling settings, prefetch deltas : true, // true = deltas loaded, false = all scripts loaded asyncdef : true, // 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 intevents: true, // intercept events that are fired only on classic page load and simulate their trigger on ajax page load ("DOMContentLoaded") 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 : 0, // callback handler on completion of each Ajax request - default 0 pluginon : true, // Plugin set "on" or "off" (==false) manually passCount: false, // Show number of pass for debugging DCLDelay: 0 };
Precautions
- When calling Ajaxify from within an inline script, please make sure, it is the only statement and definitely contains the following string:
"new Ajaxify("
…which avoids unwanted recursion - When calling Ajaxify from within an existing script, please make sure it has the identical path across pages
Setting alwayshints
You must specify any files to be loaded each time around by setting alwayshints or data-class=”always”
Optional visual effects
…then…
Public methods
Principally, you can access any subclass directly, if you know what you’re doing – the following are but a few examples:
Jump to an internal page programmatically:ajaxify.pronto(0, URL);
e.g.
ajaxify.pronto(0, "https://mysite.com/about");
Access the XHR object of the central fetch()
ajaxify.getPage("x");
ive been add in my html on head
and add code in bottom after tag
let ajaxify = new Ajaxify();
i dont know but when i click some link, the page not working,
normaly when i click link the browser will loading.
but when i place that script, nothing happen in my page, browser not loading, and not load content, then stuck in that page, cant move to another page, and cant submit form also.
i m use localhost server in my phone, im using opera mini and chrome for browser, and im use php, many php file included in index or aboutme or else, is that make the js not working?
is i did wrong? tell me how to use ajaxify script. i cant understand js, just basic.
The simplest thing would be to upload everything to a test site and submit a link to it?
Offline installations might not work…
You have repeated that two times in this sentence.
When calling Ajaxify from within an existing script, please make sure that that script has the identical path across pages
Thanks, much appreciated!
Fixed đ
Please I’m new to this and everything seems unclear to me… I have downloaded the ajaxify.js script on my project, I have 3 pages… How can I use ajaxify to navigate from one page to the other
Please I need step by step explanations … The documentation on this site is not suited for beginners… Please expansiate
Basically, you install the plugin as described in the installation section and then setup the Ajaxify call…
Hi Joshua,
I attemped to elaborate on the explanations in the interface section.
Maybe you can tell me, what you think?
Thanks and regards,
Arvind
hello,
it’s working like a charm,
i really appreciate your work and your response,
i’m sorry but as i’m not an expert in Ajax, can i ask about SEO Effects ?
if i use your plugin to make all my sites ajaxify would it some how have any Effect on my sites SEO on any angel ?
Thanks.
Hi Erfan,
that’s good news!
I think the slideshow can lead to better user retention maybe?
Other features of the plugin probably won’t have any effect, because the HTML the spiders work on are the same that Ajaxify sees and processes.
However, the more awesome the user experience, the more backlinks you may receive đ
Thanks and regards,
Arvind
Thanks for your reply,
pardon my English i meant SEO Affects factors such as google page view, crawling, bounce rate, availability and index-ability for google robots and etc … ?
are ajaxed website and non-ajaxed the same for google?
as my site is using ajax to load pages is there any changes i need to do or any thing else i need to take care of so my site become as google friendly as it was before?
or the structure is the same as a simple html and non ajaxed site ?
Thanks.
Hi Erfan,
again: no, I don’t think there will be much of a difference in that respect, because the HTML is the same in both cases.
Thanks
Thank your for your time and responses.
Good luck đ
hello,
Thanks for your work.
i’ve searched a lot for a way to make my wordpress site fully ajaxify but didn’t found any solution better than yours. kindda happy to find you.
i’m trying to use your js file (https://cdn.jsdelivr.net/gh/arvgta/ajaxify@7.6.4/ajaxify.min.js) to make my wordpress site ajaxify.
my wp jQuery is jQuery v3.5.1
i’ve added ajaxify.min.js and added this line of codes tag :
jQuery(‘.MainContentWrp’).ajaxify();
but no content is showing up.
when i click on an internal link instead of loading new content inside .MainContentWrp it changes to an empty div with id=”undefined” identification.
here is a link to the page : https://cutt.ly/cgXN7d6
i’ll appreciate it if you could take a look into this and help me fix the problem.
P.S: is there any ready2go WP Plugin version for this ? or i should add the java and custom code the rest ?
Hi Erfan,
first of all – instead of:
jQuery(â.MainContentWrpâ).ajaxify();
…you have to do something like this:
jQuery(â#MainContentWrpâ).ajaxify();
…i.e. supply an ID, not a class…
Could you please try that first?
Hi,
Thanks for all the kind support so for.
Is there a way to update the page title on page change?
Thanks.
Hi Seyon,
The page title should be updated automatically…
Regards
Of course, it does.
Thank you.
Hi,
I am trying to implement ajaxify in my site. The audio player is working fine on initial page load. However, after the ajax page update, can not add tracks from the new page. Please see the link below:
Your help is much appreciated. Thanks.
Hi Seyon,
when I click on your link, I get a hard warning, that your site is very insecure.
(Therefore, I have deleted it)
I would fix that first.
Thanks and regards
Hi,
Thanks for the reply.
The error was due to self signed SSL certificate. Please check the following link:
http://95.111.255.98/music/page1
Hi Seyon,
the link works now, thanks!
When I start a song and toggle between pages, it seems to work as well.
If you would like to play it safe, you might want to use a real domain instead of the numbers?
Maybe you got it working in the meantime. (I can only see an error because of the favicon in the console)
Regards
Hi,
Thanks for looking at the page.
My problem is that I can add tracks to the playlist on the first landing page. When I toggle to another page, the player persists with the tracks added from the previous page. But I can not add more tracks on the new page. You can click the playlist icon to expand the playlist to see what I mean.
Sure, I will change to the real domain name, when production-ready.
Hi,
It seems you’re working on the site quite a lot (can’t get a stable impression of what you’re describing).
I suppose everything is fine when Ajaxify is disabled?
Hi,
When you open the page, you are landing on page 3.
Do not add any tracks.
Toggle to page 4.
Now try to add a track, it is not working. When I turn off the Ajaxify, everything is Ok. It seems that the inline javascript is not working after ajax page load.
Hi,
yes, I agree that it is the inline script, that is not loading on subsequent loads.
It might just be due to the fact, that you are waiting for the
ready
event.When Ajaxify is active, the
ready
event is not fired on further page loads.Instead, you can hook into the Pronto events(please see the docs)…
Thank you for that.
However, I have hard time hook the events to the pronto. Could you please provide me some example code or example site. Thanks again.
Sure, something like this described in the events section:
$(window).on('pronto.render', function(){...}
);
replacing
...
with the interior of your inline script, without thejQuery(document).ready(
Hi,
I am really sorry to be a bother. I have tried many things with no results. I would appreciate your help. The following script is the one to be wrapped in pronto script. Please advise me how would I do that.
...
Thank you very much.
Hi,
I did so in my previous post. No need to dump tons of code in here either.
Sorry about but. But the pronto.render did not solve the problem..
I would have a different idea, if you are willing to try it…
Sure, will definitely try. Please let me know.
Try putting the whole inline script in an external file (without the check for the
ready
event).If it doesn’t work straight away, specify a suitable hint in alwayshints…
Sorry but no luck.
If I take document ready function, the playlist does not load at all. I tried to wrap the code in $(function(){….}, still the same issue. Once I move out of the landing page, I can’t add any tracks to the player.
Sorry, I know I am bothering you enough.
The real problem is that I’m out of advice, sorry.
It might be something within the inline script – but I don’t know…
Thank you very much for the time and patience so for.
I will keep you posted, if I ever find an answer.
Sure, no problem. Yes, please do and best of luck!
Hi,
I haven’t found a solution yet. Do you think, you can work on this as freelance basis, if you have ftp access?
Please let me know.
Thanks.
(solved in the background)
Hi Arvind,
Sorry for my late answer ;
That was truelly gratefull enough to bring a very small piece to your work ;
Now i can investigate on my original problem ; time to time, when i browse back, it does not go to the page it must be.
I will keep you in touch đ
Have a nice day,
Sebastien.
Hello,
First of all : congratulations for your work and thank you for sharing it !
And, as i’m reading the comments, i’m truelly impressed how you manage to answer everyone for almost every kind of question.
A part of that, i’m also coming to you because i met a strange problem đ
As i met some random issue with the history (sometimes, it does not go back to the previous page) ; i have tried to investigate by using the no minified version of the js file.
But so, i got an error as soon as i click on a first link :
Uncaught TypeError: Cannot assign to read only property ‘tagName’ of object ‘#’
at prop (jquery.min.js:2)
at z (jquery.min.js:2)
at w.fn.init.prop (jquery.min.js:2)
at _isBody (:67:92)
Altought i understand the meaning, i can’t figure why this does not came up with the minified version.
Do you have some clue ?
I’m using the last version (7.6.2) ;
My initial call is :
$(‘body’).ajaxify({
prefetchoff: true,
refresh: true,
memoryoff: true,
selector : ‘a:not(.no-ajaxy):not([href^=”#”])’
});
Thanks by advance,
S.
Hi SĂ©bastien,
instead of:
$(âbodyâ).ajaxify({...});
…could you please try:
$().ajaxify({...});
(in case of a full body swap, an empty main selector is expected)
Thanks and regards,
Arvind
Hello Arvind,
Again, i’m bluffed how quickly you answered ;
Thanks for your advice ; i have try with an empty selector (i remove ‘body’) but same results.
(error is with the not minified version).
Hi SĂ©bastien,
thanks for all the kind remarks đ Please keep the main selector empty for the course of our debugging…
Here’s the answer from our tester:
Thanks and regards,
Arv
Hi SĂ©bastien,
when you say, it happens only with the unminified file, which one do you mean?
Could you please point us to it?
Maybe we tested the wrong one?
Thanks and regards,
Arv
Hi Arvin,
Thanks to you and your tester for your time ;
Sadly, i could not provide any url for further testing because the project is in a private network only (and i’m really sad to answer that).
The not-minified file is the one going with 7.6.2 version mentionned in the bower.json file. (All are coming from the github).
I have tried under linux with both Firefox and Chrome.
I admit that maybe the most strange is that the behaviour is not the same between the ajaxify.min.js (wich work well) and the ajaxify.js.
I will continue investigate ; the layout of the page is quite complex with lots of other scripts loaded so that won’t be easy đ
I will also try to catch the $.log you smartly put into into the source so maybe i will figure more precisely where it hangs.
Thanks again,
S.
Hello Arvind,
I succeed in isolate the problem in the not minified file ;
It seems that the script try to rewrite the tagName property of the body DOMElement (which is in read only).
I commented that part of the code and it seems working now.
I still can not figure why it does not fire error with the minified version (are both files sync ?).
isBody: $t => {
return $t.prop(“tagName”).toLowerCase() == “body”
// i commented the next line, and now it works with not minified
// && $.cache1().find(“#ajy-body”).prop(“tagName”, “body”)
&& (_ld($(“body”), $.cache1().find(“#ajy-body”)), 1);
}
Regards,
S.
Hi again SĂ©bastien,
thanks for the rigorous testing and I have forwarded your enquiry to Edin again…
Regards,
Arv
Hi SĂ©bastien,
– https://4nf.org/ajaxify.js
I’ve commented out the code you suggested commenting out in that file as well.
Also tested against this site. Works like a charm…
I could imagine, that it actually depends on the jQuery version in use, whether a hard error is thrown.
The bug was already in here:
– https://cdn.jsdelivr.net/gh/arvgta/ajaxify@7.6.2/ajaxify.js
…possibly explaining, why there was so little feedback on the body swap option.
I’m really grateful for your feedback. If you want to at some later point in time, I can list you on my demos and/or thanks page!
I will let Edin test our new file in his environment and then probably create a new version…
Have no idea, why the minified file works for you…
Regards,
Arv
Hi I am currently in the early stages of developing a website and trying to use/learn this plugin. So far I am able to load my web pages in the target div, but the issue I am encountering is that when I refresh the page the navbar disappears. Since I am trying to use ajax to load my web pages, I have only placed the navbar in the index(homepage). Thank you.
Hi Imran,
Thanks for your interest in the plugin.
You also need the navbar on all pages, otherwise it won’t work.
Imagine a user entering your site via a sub-page instead of the index…
Regards,
Arvind