Instructions
Place one of the following:
<script src="https://cdn.jsdelivr.net/gh/arvgta/ajaxify@8.2.9/ajaxify.min.js"></script>
OR
<script src="https://4nf.org/ajaxify.min.js"></script>
OR
<script src="https://mysite.com/ajaxify.min.js"></script>
… in the head. Then, include the plugin as described on interface.
Google Analytics Setup
Please use this snippet, replacing both occurences of the ID with yours
Google Maps support
Please use HTML code along these lines
Thank you very much for sharing. Can I include your article in my blog? I will mark the source of the article, your article is really great!
Please excuse the delay – yes, of course you can!
Thanks!
Hi Arvind,
Can Ajaxify be used along with RequireJS ? My project uses RequireJs and I would like to use Ajaxify too.
Hi Varghese!
I’m not sure to be honest. But years ago, in this thread a guy got it working along with RequireJS like this – quote:
I implemented it with:
require(["jquery", "bootstrap"],function(){
$.getScript("https://4nf.org/history.js",function(){
$(document).ready(function(){
$("#content").history();
});
});
});
Please try that approach, if feasible, substituting the two occurrences of “history” with “ajaxify”.
Hi,
It doesn’t work at all. The console returns me “.ajaxify is not a function”.
I’ve put JQuery and your plugin in the head, and I call it in a .js after that.
Should I need to install something else, like a master plugin or a child one ?
Thx
Hi,
Including jQuery and the minified Ajaxify file from within the head is fine!
Just a guess: could you try calling Ajaxify from within an inline-script, instead of calling it within a JS in the head?
Could you please drop a link to your (test) site in here, if possible?
Thanks!
Hi,
thanks for the nice plugin ๐
i’m having problems to run it. seems like the modul global variables are causing problems. (line 93). getrootUr() throws an error (function not found), api gracefully exists.
do you have any idea why?
best, thomas
Hi Thomas,
thanks for your interest in the plugin. Because you’ve just spelled it wrong – did you modify the code in any way?
It’s supposed to read
rootUrl = getRootUrl()
at line 93I don’t suppose you’re using a different Ajaxify plugin at the same time?
Regards,
Arvind
Dear Arvind,
I am trying to install Ajaxify on the site:
http://web4u.kreakurs.de
It does not work yet.
Can you please describe what to do the simplest way that is possible?
I think your plugin is wonderful!
web4u webdesign
Hi,
looks as if you got it working?
Regards
Hi,
I just learnt about ajaxify and I’m very excited. The problem is I have read the notes but failed to implement ajaxify on my website completely. All links call a form submit method that executes a cgi script, after trying what I read I still get entire page refresh. Please Log onto http://www.cloudpos.co.nr/ and use the following login details:
Email: rchinovhiringa@gmail.com
Password: admin
I really need to ajaxify the project because bandwidth is bad here in 3rd-world countries.
Thanks
Roland
Hi Roland!
Thanks for your interest in Ajaxify.
I’ll get back to you on Friday and have a look at your case…
If you would like to reduce bandwidth, it is probably advisable to set:
prefetch: false
(before I forget)
Concerning the central form submit method, it may be, that Ajaxify, in its current form, is not capable of handling it…
Regards
Hi Roland!
I had a look, thanks for the details…
Could not see, that Ajaxify is being loaded.
Also, you’re using frames, right?
That might be a problem, too…
Thanks and
Regards
I’m currently using an old “ajxify” like plugin, pagify.js but would like to use yours. I’m not sure how you set up the links to load html pages into the set div using ajaxify. Pagify uses and id like structure ( href=”#page” points to page.html) I find setting the href to page.html using ajaxify, does not load the page into the set div. I am seeing the log indicate that ajaxify is loaded but it say it can’t find the page. An example of setting up links would be helpful. Any idea why the page won’t load?
Thanks for your interest in this Ajaxify variant.
You can specify:
– The links to be “sensitive” in the
selector
property– The divs to be swapped each time within the jQuery selector
Summing it up -> something like this:
jQuery('#main').ajaxify({selector: '.ajaxy'});
…would swap the two selected divs and ajaxify all links with the class “ajaxy”
Hope that helps – please do ask again, if you’re unsure!
Thanks!
Thanks for the help but still not working. I get “Error in _request : Not Found ajaxify.min.js:1:2656” in the console when I set top my link like this:
Emergency, where emergency.html is at the same level as index.html and has the div #main in it. Do links have to be absolute to work?
sorry, didn’t realize the html of the link wouldn’t show. the link has an href=”emergency.html” and is at the same level as the index.html and has the div id #main
Hi Mike,
Just visited your site and it seems to be working (the sub-page “emergency”)?
I cannot see the error you described?
Not using it on the live site right now (that’s pagify.js), but on a test server. I will send a link to it.
Yes thanks, good idea ๐
Here is a test site with ajaxify loaded but not working.
http://vetdosage.com
Hi Mike,
thanks for the link to the test site!
Could we start off with calling Ajaxify in simpler fashion?
The way you’re calling it in here at the moment is illegible, I’m afraid…
Please try this for a start:
$(document).ready(function(){
$('#main').ajaxify({selector: ".ajaxify"})
});
EDIT: Just checked the HTML of your homepage – there are severe errors (e.g. unclosed div’s)
Thanks for the feedback. I uploaded the files without cleaning up the html. Should be fixed now. Ajaxify seems to work on all page loads except one with an iframe (chips.html). The other issue, which may be my coding, is that index.js does not function in the loaded pages. Should that script be just in the index page only or in each of the loaded pages?
Hi Mike,
thanks for persevering with your tests!
Just very briefly – if you’d like a simple fade, please specify:
aniTime
: 400 // or the milliseconds, you’d likeI’d love to include your site on the demos page, if you succeed in procuring Ajaxify and with your consent!
EDIT: Yes, you have to include Ajaxify on all sub-pages, in case the user jumps into a sub-page directly…
Also, the plugin call on each page ought to be identical!
Tags is
a tag == a href tag
b tag == bold tag
strong == bold tag
header == html5 header tag
footer == html5 footer tag
section == html5 section tag
sorry for multiple comments.
It was due to WP.
please those TAGS comment.
Alright – e.g. HTML5 tags. What is your question, then?
jQuery(โ.col-md-8โ).ajaxify();
it didn’t work because it switch same content to other page.
so .col-md-8 not content but whole page switch to them.
Please guide me.
But in demo here only selected content div changes ๐
Hi Tom,
as mentioned before – the selection hast to be a content div ID, e.g.
jQuery(โ#maincontentโ).ajaxify();
Please fix that first!
okay, i will try that too. ๐
it will not accept TAG?
Hi Tom,
what do you mean by “TAG”?
Jquery in not working. I come from other page.
It shows only when we refresh that page.
Can you help me why it is happening?
Hi Ravi!
Thanks for your interest in the plugin and the link to your site. (Is that the right link?)
You’ve currently commented out the Ajaxify call on that site.
It’s a bit difficult to tell – could you please elaborate on that?
Thanks and
Regards,
Arvind
Hello,
I’ve tried to update ajaxify but… this version cause the impossibility to scroll on touch devices, when your finger is on the link opened via ajax. Really strange but true.
Hi Andrea,
I’ve just pushed to a new version. Could you re-try, whether that applies to this version as well?
Thanks!
How to use it?
I tried docs not works.
It load same content but title only change ๐
jQuery(‘aside’).ajaxify();
it return all content to other pages.
is there a way to load only 1 element content like this site do?
2nd. i don’t to load content on Mouseover ๐
Hi Tom,
an ID of a content div is expected in the selector:
jQuery(โ#asideโ).ajaxify();
By default
preview
is turned off…There’s no error in console. No error in javascript execution.
I don’t think is due to any js errors, i think there is some action that inhibit touch on iOS when you open a link by ajaxify.
Hi Andrea,
thanks for posting back! I unfortunately don’t have an iOS device, but a friend of mine does…
Do you think it applies to the “Mac”, too? Or just devices with a touchscreen?
EDIT: You could try setting
prefetch: false
because you havememoryoff: true
set, too!Thanks again!
Same problem! :O
Hi Andrea,
could you please specify, what your problem is in your words?
Thanks!
Sure.
I have some links in display:block, each link point to an article (see on bebeap.com home page). On an iPad, when I tap one article link, the article appears in the third column.
When you try to scroll the page with the finger on the opened link, the page won’t scroll. Never.
Now I’ve updated ajaxify plugin, so you can see the issue on my site, http://www.bebeap.com.
Thank you very much.
Hey Andrea,
Thanks for the link to the test page. Very useful, nice site!
Unfortunately, I don’t have an iPad for debugging.
Do you think it is specific to the iPad?
Just briefly cruised your site with Chrome and could neither see an error nor a warning.
Maybe you’ve sorted it out in the meantime.
What I noticed though, is that there is only one instance of display:block on the entire homepage?
It would be great to pinpoint the error in e.g. the Chrome/Firefox console?
Thanks!
Can’t belive it. With “prefetch: false” now it works fine! And scroll!
Great!
Thank you very much, your support was really appreciated.
See you soon! ๐
Hi Andrea!
That’s great! I’m glad it works now…
Enjoy!
Talk to you soon ๐