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.
If I don’t want ajaxify to apply to every [A] element on the page then I need to add a selector to the options.
$(‘#main’) .ajaxify({‘selector’:’#nav a’,’verbosity’: 2})
This tells ajaxify/pronto to only observe clicks on the link in my main navigation.
Previously it was catching all links which is why my gallery script wasn’t being triggered.
I wish this info was mentioned in the documentation here or commented in the code.
http://www.barznoble.com/x/barz/
I have updated my test case to just use index.php, bio.php and gallery.php
I still have the problem of getting 2 instances of div#main in the dom.
I have moved all css to link elements and all js to script @src tags instead of inline.
The css and js now load/get added to the dom as expected.
But it seems that ajaxify disables certain events that were supposed to be handled by my gallery script.
If I don’t call ajaxify() then my Lightview based gallery works.
It seems ajaxify() hijacks lightview’s click event handlers on the pictures in the gallery.
Maybe there could be a feature to white-list or black-list certain class attribute values to make your ajaxify skip modifying elements with that have a certain class assigned.
At the bottom of my gallery I have a paragaph that when clicked will force open a gallery item. But clicking that same item’s original anchor element will not behave as expected.
Update. It seems my gallery script only works within the context of page load or dom:ready. So it’s likely not your ajaxify that is the problem there.
Also if I click bio.php then click the header logo to get back to index.php and repeat that a few times, bio > index > bio >index > eventually I see an infinte loop happening in my console.
Sorry, i just realized I was working from an older copy of the site. The problems I just described were from having .ajaxify in an inline script. I’m updating now.
The infinite loop is no longer happening now that the ajify call is in its own .js file.
But I still the issue where the #main from the ajax loaded page is being inserted into the existing #main rater than the _contents_ of the remote #main being inserted into the existing #main. And also the style tag is not being imported.
It should load it only once and then no more, when ajaxifying.
If the stylesheet already was loaded on previous pages, then it won’t load it again (delta loading).
If I initially load gallery.php then the css and scripts for my gallery will load. When clicking ajaxified links to other pages then going back to the gallery the css and scripts are still working.
But if I initially load index.php which does not reference the resources needed for gallery.php, when I go to gallery.php via ajified link, the css and js from gallery.php don’t get loaded.
Are you saying I need to find every css link and js script tag in my whole site and make them all available on the index page (or every page)?
Feel free to drop a link here to your site! If you’ve got verbose logging switched on, I could try to have a look at what you mean.
From your description, the gallery css and js for gallery.php ought to be loaded.
No, the whole point of delta loading is that you don’t have to specify a maximum of stylesheets and scripts for each page (in the head).
Hi Thinsoldier!
I agree and could see, the old algorithm was faulty.
I’ve created a new version…
Could you test it again, please?
http://www.barznoble.com/x/barz/index.php
The index page and the bio page both have a div#main.
The bio page also has an additional style tag in its head.
Index.php has history.js
If I load index.php and click the bio.php link, the div#main from bio.php is inserted into the page resulting in TWO div#main elements in the dom. The style tag from bio.php is not inserted into the dom.
HI. I got your history script running and I’m seeing where it makes the GET requests for other pages in the site but it never actually updates any elements on the current page with the html from the response.
Could you give more instructions?
What does this mean: ‘first’: ‘body’, //Top-level jQuery selection to be handled first – override with any jQuery selection or null
How to I indicate which element on my page is the “target” that receives the html from the ajax response?
Hi Thinsoldier,
I’ve completely overhauled the script to give it ‘Pronto.js’ as a backbone.
Could you try again, please?
Cheers!
This is now the only JS in the site:
$(‘#main’).ajaxify({‘verbosity’: 2})
From what I can see in the log it seem as soon as my index page loads it immediately tries to load the same index page again via ajax.
After that it looks through the ajax data, sees this inline script, runs it again and causes the index page to be ajax loaded again… repeat… repeat…repeat…
correction, my script tags disappeared in the previous comment.
script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’
script src=’https://raw.github.com/arvgta/history/2.0.0/history.js’
inline script
$(‘#main’) .ajaxify({‘verbosity’: 2})
this is the only JS in my site
Hi Thinsoldier,
try including the call to ‘ajaxify’ in an existing jQuery script in the head, or a new one.
It’s not meant to be an inline script, which I will document now…
Thanks. That works.
1 more problem It should load an additional style link for 1 of the pages but it’s not doing that.
link rel=”stylesheet” href=”library/pics.css” type=”text/css”
I tried putting the styles in a style tag in the [head] as well but that didn’t work either.
Hi Catharina!
The way it should work, if you don’t specify any options is that first, the whole body is ajaxified and then the div-container is swapped only and re-ajaxified.
Can you check the console in Firebug / Chrome / IE console what it’s saying?
You can pass the plugin the option: {‘verbosity’: 2}, which enables verbose error logging…
Hi Catharina!
Just leave out the ‘defer’ – I’ve cut it out in the documentation on this page, too – thanks. Yes, if you’ve got an existing wrapping div you just need to specify it’s ID in the plugin call. At the moment, please use the version at GitHub, because I’m currently heavily experimenting with script handling on this site…
Its weird, but i cant seem to get it work. I used your GitHub version aswell.. I dont know what I am doing wrong, but I think it might have something to do with the blogger system. My main div-container is only adressed through my blogger template, and my navigationbar is a div i added myself, it should be easy to adress the main container, but is there possible that my internal links are the fault? They are links to pages located in my blog, and by clicking, even though ive adressed its ID in your code, it keeps refreshing the whole blog.
Oh, and btw, I do get an error code because of the ‘defer’-partof the script? I got rid of it by typing defer=”, but will that make the script worthless?
Thank you very much for your reply! I appreciate it 🙂
I was thinking the same thing about this being rather easy to apply to any website, but the case gets so very disturbingly difficult when operating with a blogger platform, and following their set and hack my way through that.
You know what, I think i might have it, but do i simply then add the div ID of my main-wrapper, and my navigation-bar div-id instead of #content? Will the links inside my navigation-containing-div then be affected by the code and load the links in the main wrapper?
Intentionally i wouldnt really need my navigationbar to load either, but if i have to to get the links working i will.
This is so awesome if i get it to work! You’d be my endless reaserch’s savior!
Hello there!
At first I was relieved to find this amazing usage of JQuery, as I have been searching google from start to end looking for something that will help me load only spesific parts of my new page (wich is a work in progress). The only problem is that I have no idea how to adept this code into my Blogger template, as the parts (header, sidebar, main, footer) of my blog is not divs, but merely addressed through CSS in the stylesheet. I have been using Jquery and ajax for sliders and tabs already, but the main goal is to be able to spare my new blog (wich is to look a lot like a website) from all the loading capacity! There is no reason to load when i want the header and sidebar static (I have no use for a footer). I would love a response from you, or if you have any directions for me in the world wide web. I would have adressed blog posts and pages through iframes, but there are no id’s except the url, and that contains all other parts of the page aswell, so i havent gotten any further on my project.
Thanks in advance. And btw, this page looks quite neat!
Hi Catharina!
The simplest use-case of the plugin is manipulating just a central content div, e.g. with the ID of “#content”. You then call the plugin like this:
$('#content').history()If you could wrap the varying content in such a div, I suppose you could give this plugin a try. I understand that your header and sidebar are static. Those are good pre-requisites…
Thanks for your interest in the plugin!