Ajaxify – The Ajax Plugin
For web developers
- Interface
- Pronto events
- Demo sites
- Installation
- Alwayshints
- Inline scripts
- Ajaxify forms
- Delta-Loading
- Memory effect
- Prefetch effect
- Scroll effects
- Preview effect
- Adsense + Ajaxify
- Logging
Optional visual effects
For geeks
Comments
We need your comments and feedback!! Please drop one here (see below) or in the respective sections
On which browsers does this work?
This plugin works on HTML5 browsers and gracefully degrades, if the HTML5 History API is not available.
hi sir please help i have been using this plugin but i always get error
:- ajaxify.min.js:1 Uncaught TypeError: Cannot read properties of null (reading ‘attributes’) I got this error, i am using latest version of ajaxify and jquery.
1: this documentation is no really good for beginner’s, no any example how to setup proper and load page when click on menu or link
2: i am using this cdn : https://cdn.jsdelivr.net/gh/arvgta/ajaxify@8.2.9/ajaxify.min.js
and for jquery : https://code.jquery.com/jquery-3.7.0.min.js.. still getting error
3: home
when i click on home link then get error
4: let ajaxify = new Ajaxify()
please help sir i am using this plugin in small php project. i want to use it as a SPA application when page load without reloading
Hi there,
could you please check in a first step, whether older versions of Ajaxify don’t work either?
Thanks and regards,
Arvind
Hello Sir,
thanks for this very nice stuff.
I use Codeigniter for a while and every google request on how to ajaxify codeigniter is very specific or contains libraries, third-party installations and stuff like that.
Your tool is only two lines of code and everything works. 😀 😀
Thank you soooo much.
By the way… greetings from Munich! 🙂
I live also there.
I would just like to know where can I find the plugin, I got the code but still, I’ve gone through the whole site, please tell me. I’m not a developer but I would appreciate some help.
Please have a look at:
– https://4nf.org/installation/
Hi,
Thanks for creating this library.
Where do I have to put the scripts:
in the header ? or just before ?
Do I have to use jQuery(‘#content, #nav’).ajaxify();
or let ajaxify = new Ajaxify({elements: ‘#content’});
Thanks
Hi Lorenzo,
yes, you include the plugin by placing one of these as described on the installation page in the head.
Then, you place the following:
let ajaxify = new Ajaxify({elements: ‘#content’});…in an inline script in the body or an existing one, but after including the plugin.
Thanks and regards,
Arvind
Great respect for your work. It’s unbelievable that you provide this for free. I just finished testing your plugin. Works perfectly for my purposes. Hats off. Thanks a lot.
Hi, this plugin looks clean and well organized, but I still dont get how to use it correctly. Is it also meant for bigger Webprojects? Websites that include a lot of server based code, databases and many more plugins. Or is the Idea of it, to “ajaxy” little Websites that already exist?
Hi, a high-level question for a change – thanks for that!
I would like to answer with a clear “yes”. The aim of this Ajaxify plugin is to address as many types of sites as possible, also highly complex ones and written with various types of CMS’s.
Here is the most prominent example site – Beinsports, that uses Ajaxify.
(Just verified, that they are still using Ajaxify – search for “ajaxify” in that file)
Also, 4nf.org itself uses WordPress as a CMS and employs several WP-plugins for syntax-highlighting, emojis, share buttons etc.
(Using WP obviously entails having an underlying database)
Finally, you can also see other examples with varying complexity in the demos section – quite a few examples that use Bootstrap as a CMS)
Which CMS do you aim to use? (I would say, that using a CMS is probably benificial when using Ajaxify)
Ajaxify just basically works on the HTML your site renders (including as many features of HTML5 as possible).
In this sense, it is not biased to any CMS / other tools or type of database.
Answering the other question, Ajaxify should obviously be capable of being used on existing and new sites.
However, you might need to customise your Ajaxify call a bit, as you say, for special or more complex features…
Feel free to ask more in-depth, if you need more assistance…
Thanks!
Hi, thank you for replying and for these few examples. But theres one thing – I dont use any cms. But I guess that is no problem. I just have to understand how the structure of my project has to be, to work properly with ajaxify.
Or do you think its a bad or “uncomfortable” idea to use ajaxify without a cms?
Hi Kev,
of course it is not mandatory to use a CMS. One advantage of a CMS is consistency across all pages of the site and the encapsulation of lower-level tasks.
Go for it!
Cheers, Arvind
Hi Kev,
because you were asking about more complex sites – here are two more:
(can also be seen towards the bottom of the demos page)
I believe at least one of them, if not both also use WooCommerce.
The creator of these sites – Matt Down – affirmed, that Ajaxify from 4nf.org was the first plugin to cooperate well with WooCommerce…
Hello there!
This plugin is simply amazing! Congratulations!
I was wondering if it is possible to call the clicked link with the method POST instead of GET, and also if it would be possible to send a parameter within. I’m not sending a form, it is just a flag so my controller can request the right page in php.
Thank you in advance for any light on that 🙂
Hi there! Glad you like it!
Interesting question. There is the possibility to toggle the mode GET/POST like this:
$.rq("is", true); //set mode to POST…in case you can do that before firing the Ajax request…
Do you have an idea how it might work yourself?
Thanks once more for the very positive posting…
… and the request data can be set programmatically, too, with:
$.rq("d", mydata);Hi, how do I add this to my theme? Do I just add the js code and call it in via functions, and then I’m done? Or do I have to do extras to it?
Exactly – you include the ajaxify.min.js in your theme.
The only other thing to do is to specify your Ajaxify interface…