Sat, 26 Jan 2008

New Geek Fun…

I decided I needed to play with AJAX a bit after seeing all the fun other folks are having with that on their web sites. Generally speaking, I’m not a big fan of eye-candy for the sake of eye-candy.

But this seems like a good use of AJAX to me: having the comments and comment form for each entry in this page seems redundant and wasteful of page real estate (and perhaps of bandwidth, though that’s less of an issue as all the regular visitors are now on broadband connections). However, loading a page just to see the comments and form seems less than ideal.

So, now the comments will (should) reveal in-line on this page. I’m not completely sold on this, so let me know if you find it difficult or confusing; it’s easy to change back.

And for anyone interested, it was also pretty easy to set up: I’m using Scriptaculous (and Prototype) as the AJAX libraries. Actually, Scriptaculous is providing the reveal effect, Prototype is the real AJAX library doing the work. So I put those files in place and referenced them from the main blog page template. Then I Wrote a couple javascript functions to use the libraries to get and display my contents. Then I just needed to create a new “flavour” (that’s what Blosxom calls styles of content or sets of templates) to display the comments and form as a snippet of HTML.

The couple of “tricks” I tracked down to make it work reasonably well: set display to none for the container (not the CSS for the container) that holds the AJAX content (the comments in my case) and let Scriptaculous’s effect make it visible. And tell the web server (Apache, of course in my case) to send some no cache headers on the pages and page snippets involved in the AJAX content — otherwise they will be cached and not reflect updates as they should.

Of course, when I hear from folks that this really isn’t working, I’ll try to get it working better and update the tricks here. Perhaps for extra credit I’ll replace the comment submission button with an AJAX post to keep everything in this page…

The only downside I see to this approach is that I don’t expect it plays well for screen readers or for search engines. We’ll see if I have any time to make the comments more accessible for those two specialized types of visitors.

6 comments

comments...

David wrote

In-page form handling.
Actually that was easy to add as well. Just changed the form action to point to a Javascript function using prototype to post the data back to the blog with a new plugin to handle it. The new plugin is almost an exact copy of the prior writeback plugin.

David wrote

No more downside?
I think I have the fix for the problem with search engines and screen readers not playing well with Javascript (AJAX) links: it was easy to switch the permalink to the old writeback form that included the comments in the page. That should allow search engines to crawl that easily and I added a title tag to the link noting that the comments are included with the entry on the resulting page. I think (but I don't know as I don't have screen reader to test with) that will help with screen reader users.

David wrote

Hmmmm
Well, in further testing, my cell phone can't get to the AJAX comments -- no real surprise there. But I also can't get to them with my Nokia N770. Admittedly, that's a bit dated, but still I should make that work....

David wrote

Hmmm... again
I have the Nokia N770 working now, but it seems like (I suppose without surprise) the cell phone has some limitations on it's JavaScript interpreter. My N770 fix was JS based, I may need tweak the CGI script to fix the cell phone...

David wrote

Better...
OK, this seems better. The JavaScript-based fix didn't work with the Nokia cell phone, I don't think it liked the idea of an onclick event in a link -- but that's just a theory, it really doesn't matter as that approach wasn't working. My next idea was to try to use Apache to redirect to a special version of the blog software that would use different links. But I didn't like the idea of keeping two copies of basically the same script in sync. So the next idea was to use Apache rewrites to rewrite the main blog pages -- but as I started down that path, I saw I'd have several rewrites to set up: "*.html", and "/" within the blog portion of the site for each problem browser. Then I realized a better option was to edit the script itself to add a new default "flavour," the blosxom name for template, for some browsers based on the User Agent (the name of the browser). That seems to be working fine. If you have trouble with the comments, let me know and I'll try to find the User Agent for your browser and add it to the special list.

David wrote

The function
I added a note on my blosxom page about this which includes the function I added to get it all working.

trackback (explanation)

TrackBack ping me at:

https://www.kayakero.net/news/blosxom/file_120137710624694.trackback

Back to News and Updates