[Tutorial] AJAXify your MODx site - and it degrades well, too!

Look at me! I’m ajaxifying!

thnx for the tutorial, I’m implementing this as we speak, I’m eager to see the results

by the way, I don’t think I’ll have to speak Italian to fully understand what "a 40 gradi alcolici" means


edit: wow, I’m getting there!! This stuff is great!! I’m gonna make myself a fully-toggable ’about’-box, containing links to xhtml+css validators, modx, all the ppl helping me out and plugin/code suppliers! and yeah, I’m smiling like a kid with a new toy, you’re absolutely right!

Quote from: noes at Sep 25, 2006, 05:04 PM

Look at me! I’m ajaxifying!

thnx for the tutorial, I’m implementing this as we speak, I’m eager to see the results

by the way, I don’t think I’ll have to speak Italian to fully understand what "a 40 gradi alcolici" means

Yes, you understood perfectly

Quote from: noes at Sep 25, 2006, 05:04 PM

wondering if anyone tried to dump everything in chunks? It’ll probably keep things simple.

Well, the page it’s actually divided in chunks, but I’m not sure this was what you meant. If you explain we can talk about.

wow quick reply

I meant wheter it was possible to ’dump’ all code in chunks, and it is! Keeps my templates clean and simple.

Now I do have another question: is there a way to transform a deeplink to a normal page? e.g.: I have a page loaded in a div, someone links to this page (by example using firefox’ "load in tab" function), this person would only see the page intented for the div. Is there a way (like the old-fashioned frameloaders), to load the rest of the site from within the ’content-only’-page? I’d like that, I’m going to use this code for my complete menu-structure

(last example: you probably know those links ’not seeing any frames? click here!’ that would load the menuframes around the current page.. I’d like to have something similair, but then with a check so people would not have to click)

Any more luck on back button/bookmarking support?

@rtrash: I made some reading to understand how to integrate Really Simple History in this script, but then I started considering to have the same behaviour with other JS packs like moo.fx.
But, to simply reply to your question, Angus Turnbull is waiting for me to start adding this feature to his script (at a reasonable price, indeed). I’m waiting to let him start only because it’s not my goal now, I’ve something to do and I can’t look at this thing now.

@noes: for the deeplink, the problem with this method is bookmarking and history. If you look at the page source after loading a link into the target you’ll see nothing has changed: the page is the one you’ve loaded at the start. So, if you link the page you will always get the initial page. I’m (as told in previous replies) in touch with the HTMLhttpRequest author to add this kind of function (at a reasonable price), but now I’m not able to look at this feature due to work. Eventually I can tell you that in short times I will need it so wait for a couple of weeks .
For the "Not seeing any frames?" I liked this script because it degrades well: if JS is On, you can navigate. If JS is Off, links still bring you from page to page. Nothing more, nothing less

You’re very right indeed. The ’not seeing any frames’ quote was just a quote to make my weird explanation more comprehensible. I’ll continue building my site, I can always update it! Thank you for all the work you’ve put into this already!

After fiddling around a bit with this script, I just can’t manage to degrade it properly. I believe it has something to do with the chunks I’m using as content. What chunks/links are you using? A fully-fletched HTML or just one div/p/table/span/..? I can’t figure it out from your source code. Also, why (and how?) is your JS encrypted?

Ok did some more fiddling: I believe it’s got something to do with the templateswitcher. I’m afraid I’m not using it correctly, but I can’t see how. My "contentonly" template is nothing more but:

When I set the base template for my (to load as content-)document to my default, I see everything + when I click an ’ajaxified’-link, I get the header etc twice. When I disable JS, all is good. When I set the template to the contentonly template (displayed above), it works perfectly with JS on. But without JS, it won’t degrade properly: it only loads the piece of content that should be in the div..

the link is: http://modx.escape-project.net but since I’m constantly testing, you might get something I haven’t foreseen yet

Have you installed the TemplateSwitcher plugin? You have to leave the template set to the default one, and the TemplateSwitcher plugin will change the template for the loaded content to the OnlyContent one (specify your exact name in the rel="" tag in the link).
It sounds like you didn’t use the plugin.

For the encripted JS, I use http://automaticlabs.com/products "Enkoder" to encript email addresses. I leaved just the classic info@ to be spidered, if you want to send mail to a specific account you’ve to come and see yourself the address. Less spam coming!

OK, that is what I tried.. maybe I made an error installing the template switcher. And for the template, all I need to do for the template to work is to create it in MODx? and the name in rel=".." should that contain a path? or just the name of the template?

Also, I set the httpprequest in a chunk, but I guess that isn’t making any trouble: It’s working properly, loading raw textfiles in the main content. By the way, this is the chunk I call the function from:


I have made a tempblank, the about div exists and the index.php?id=6 is a valid link too.

When I get home in the afternoon, I’ll reinstall the templateswitcher plugin, maybe something went bad while copy pasting And I’m going to check out Enkoder, sounds great!

I don’t know how that will affect this application, but documents using the template switcher plugin can’t be cached. The parser will check for a cached version and load that if it exists before it even looks at the document data.

Test your case as sottwell pointed out.