]> snarfed.org draw group stream of consciousness Ryan Barrett <snarfed at ryanb dot org> en text/html Copyright 2002-2007 Ryan Barrett pyblosxom ajax comments Ryan Barrett <snarfed at ryanb dot org> 2003-01-01T05:00:00Z en text/html Copyright 2002-2007 Ryan Barrett

ajax

This patch was applied to the Pyblosxom contributed plugins pack in revision 973. It's included in version 1.3.3 of the contrib pack.

For the impatient:
Download contrib pack 1.3.3 (includes AJAX support)
PyBlosxom home page
PyBlosxom plugin registry

PyBlosxom, the server software that runs this site, uses a plugin to handle commenting. This patch adds AJAX support to that plugin. Try it!

Specifically, comment previewing and posting can optionally use AJAX, as opposed to full HTTP POST requests. This avoids a full-size roundtrip and re-render, so commenting feels faster and more lightweight.

To enable AJAX comments, set the comment_ajax config parameter in config.py to True.

AJAX commenting degrades gracefully in older browsers. If JavaScript is disabled or not supported in the user's browser, or if it doesn't support XmlHttpRequest, comment posting and preview will use normal HTTP POST. Feel free to check out the JavaScript.

Also, since the browser window never sends a full POST request, refreshing the page after a preview or comment submission won't re-post the comment, or pop up an annoying "are you sure?" dialog box.

AJAX comment support requires a few elements in the comment-form flavour template. Specifically, the comment-anchor tag must be the first thing in the template:

<a name="comment-anchor" id="comment-anchor"></a>

Also, the buttons in the comment form should include these onsubmit and onclick attributes:

<form name="comments_form" ... onsubmit="return false;">
  <input value="Preview" name="preview" type="submit"
         onclick="send_comment('preview');" />
  <input value="Submit" name="submit" type="submit"
         onclick="send_comment('post');" />

Finally, this script tag must be included somewhere after the </form> tag:

<script type="text/javascript" src="/comments.js"></script>

All of these tags are included in the default comment-form template that comes with this plugin.

See also:

http://snarfed.org/ pyblosxom ajax comments Nick Moffitt cmt_pubDate text/html Hmm, this does look cool. http://snarfed.org/ pyblosxom ajax comments Wari cmt_pubDate text/html Whoah, looks cool. I'd never dream that pyblosxom would even get AJAX.

And the previewing, OMG, faints http://snarfed.org/ pyblosxom ajax comments Maulik cmt_pubDate text/html So fresh and so clean! http://snarfed.org/ pyblosxom ajax comments ranjit cmt_pubDate text/html just checking out the ajax gadget...:) http://snarfed.org/ pyblosxom ajax comments dsf cmt_pubDate text/html sdfsdfs http://snarfed.org/ pyblosxom ajax comments Todd cmt_pubDate text/html Testing this Ajax comment thingy.

Pretty. http://snarfed.org/ pyblosxom ajax comments Todd cmt_pubDate text/html Argh!

OK. I figured out how to make the "Post a comment..." / form disappearing act to work (a simple "display: none;" in a CSS file), but the actual Ajax innerHTML stuff is not working for me. Any intention to write up a more elaborate HOWTO on all the little cool bits?

I may be missing something very simple, but reading through the code 500 times... I don't see where I am going wrong... Is there supposed to be a <div id="warning"></div> and <div id="comment-preview"></div> somewhere? The latter seems to be unneccessary, but... I don't know. I am left scratching my head.

This is cool stuff that I have not played with until now. I would love to see your response.

-todd http://snarfed.org/ pyblosxom ajax comments Jesus Rodriguez cmt_pubDate text/html This is a test of the ajax comments. http://snarfed.org/ pyblosxom ajax comments Ryan cmt_pubDate text/html hi todd! i have to admit, i'm not a pyblosxom export or an AJAX expert, so i can't say i plan to write anything more in-depth than this page.

i learned most of the AJAX stuff from tutorials and references on w3schools and javascript. the only unusual pyblosxom parts were 1) adding a cb_handle() callback to serve comments.js and 2) using a new renderer to only serve the comment div for AJAX requests.

as for getting AJAX comments working on your site...ah, i think i see the problem. the script tag in your comment-form template should have src="/comments.js", not src="/plugins/comments.js". comments.py is hard-coded to serve it from the /comments.js URL.

granted, this is an ugly hack. i'd love to see something like filekicker integrated into pyblosxom, to make it easier to serve helper files like this. http://snarfed.org/ pyblosxom ajax comments Alvaro cmt_pubDate text/html Its great http://snarfed.org/ pyblosxom ajax comments Todd cmt_pubDate text/html Ryan,

That directory location (/plugins/comments.js) was one of the location attempts I made. I moved it back to /comments.js - at first.

I put some debug info into the js file (I can't see the http log file to see if they are being picked up). Found out that the comments.js file is not being found. I copied comments.js to every directory I have access to... no dice. So, I had to use the full URL in the HTML. To make both pyblosxom/comments.py and the html happy there is now a copy of comments.js in:
1. plugins/
2. a browsable location

So... things started to work to an extent. One can see an attempt to insert the ajaxed data above comment-anchor. But, it looks like no form data is picked up after that req.send(post_data). The xml_http_request.responseText remains empty. If you have any incite, lemme know. Otherwise, so far, this is pretty educational.

Once I get everything working, I will make a nifty writeup about it and see if anything needs to be improved. http://snarfed.org/ pyblosxom ajax comments Ryan cmt_pubDate text/html argh. sorry for the trouble, todd.

i see what you mean about comments.js. it is supposed to be in the plugins/ dir, but comments.py can only serve it if pyblosxom handles requests for the /comments.js URL. on your site, it doesn't, so pyblosxom won't serve it regardless of which directory it's in. i should make that configurable.

as for the missing response, i'm not sure. :/ try setting py['log_level'] = 'info' in config.py, then check for "AJAX request: ..." log messages to see if pyblosxom is correctly rendering the response. http://snarfed.org/ pyblosxom ajax comments Todd cmt_pubDate text/html Yeah, I have a copy of comment.js in the plugins/ directory and one in a browsable place for the HTML.

Got comment previewing to work. I just had to clear out my cache. Seems javascript is cached a bit differently than the HTML. Odd. Anyway, I cleared out my cache and previewing suddenly worked.

Posting is all that remains failing. I think there is a definite disconnect somewhere. I see the AJAX request object generated, but by the time we get to comment_statechange(...) the xml_http_request.responseText is an empty string. Not sure why. Still investigating.

Nicely filling up your comment directory aren't I. ;) http://snarfed.org/ pyblosxom ajax comments Todd cmt_pubDate text/html Fixed! Thanks Ryan!

For those following this comment thread, in short, the magicword plugin will break this ajax code in quiet mysterious ways. You can have the magicword plugin merely loaded, but not in use, and it will break it. There is a bit of extra work to do to get magicword working with the ajax stuff.

...if you are not using magicword, read no further...

More or less, you need to do 2 things:
(1) add this line to the comments.js code right near where all the other post_data plus= stuff is (note my plus sign keeps getting escaped):

post_data plus= '&magicword=' plus document.getElementById('comment-magicword').value;

(2) In your HTML, make sure you add "id='comment-magicword'" to the magicword <input> element.

That's it, it should all just work. http://snarfed.org/ pyblosxom ajax comments adasddas cmt_pubDate text/html sdasdaasd http://snarfed.org/ pyblosxom ajax comments Ryan cmt_pubDate text/html since todd's last post, i've updated the
javascript so that it submits the entire form. along with other benefits, this means anti-comment-spam plugins will work out of the box. no workaround needed!

i've also incorporated a couple of todd's additions, including better error reporting. thanks, todd! http://snarfed.org/ pyblosxom ajax comments sdfdsfsd cmt_pubDate text/html fdsfsdfd http://snarfed.org/ pyblosxom ajax comments fdf cmt_pubDate text/html dffdfd http://snarfed.org/ pyblosxom ajax comments %u9519%u8BEF%u4FE1%u606F cmt_pubDate text/html %u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F http://snarfed.org/ pyblosxom ajax comments name cmt_pubDate text/html Test http://snarfed.org/ pyblosxom ajax comments s cmt_pubDate text/html as http://snarfed.org/ pyblosxom ajax comments kk cmt_pubDate text/html k http://snarfed.org/ pyblosxom ajax comments Cool cmt_pubDate text/html Coooool! http://snarfed.org/ pyblosxom ajax comments dfsdf cmt_pubDate text/html sdfdsf http://snarfed.org/ pyblosxom ajax comments <font color=red>Red</font> cmt_pubDate text/html <b><font color=green>Bold</font>/b> http://snarfed.org/ pyblosxom ajax comments %u05D2%u05D3%u05DB%u05D3%u05D2%u05DB cmt_pubDate text/html %u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB http://snarfed.org/ pyblosxom ajax comments blah cmt_pubDate text/html neat http://snarfed.org/ pyblosxom ajax comments deKay cmt_pubDate text/html This is a test of the comments http://snarfed.org/ pyblosxom ajax comments m cmt_pubDate text/html Test http://snarfed.org/ pyblosxom ajax comments khgv cmt_pubDate text/html jgvouhvoyh http://snarfed.org/ pyblosxom ajax comments lyricsfly cmt_pubDate text/html testing http://snarfed.org/ pyblosxom ajax comments iii cmt_pubDate text/html kkk http://snarfed.org/ pyblosxom ajax comments joe cmt_pubDate text/html nice http://snarfed.org/ pyblosxom ajax comments Andrew cmt_pubDate text/html Awesome http://snarfed.org/ pyblosxom ajax comments dsadsadsa cmt_pubDate text/html dasdsadsa http://snarfed.org/ pyblosxom ajax comments michael cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments s cmt_pubDate text/html d http://snarfed.org/ pyblosxom ajax comments Didzis cmt_pubDate text/html Realy nice! http://snarfed.org/ pyblosxom ajax comments What cmt_pubDate text/html est http://snarfed.org/ pyblosxom ajax comments paige cmt_pubDate text/html cool!! http://snarfed.org/ pyblosxom ajax comments dom cmt_pubDate text/html dom http://snarfed.org/ pyblosxom ajax comments rob cmt_pubDate text/html great work! http://snarfed.org/ pyblosxom ajax comments a designer cmt_pubDate text/html mmm http://snarfed.org/ pyblosxom ajax comments test cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments ytu cmt_pubDate text/html ruyturuy http://snarfed.org/ pyblosxom ajax comments Lock Picking Guide cmt_pubDate text/html Great, going to implement on my site soon! http://snarfed.org/ pyblosxom ajax comments rewww cmt_pubDate text/html ererewrwe http://snarfed.org/ pyblosxom ajax comments JB cmt_pubDate text/html testing http://snarfed.org/ pyblosxom ajax comments Peej cmt_pubDate text/html Yes - I like berry berry maach! http://snarfed.org/ pyblosxom ajax comments Web designer cmt_pubDate text/html Good one. Like it. :) http://snarfed.org/ pyblosxom ajax comments gfgffg cmt_pubDate text/html gfgg http://snarfed.org/ pyblosxom ajax comments dimo cmt_pubDate text/html cool tool will be implementing it with my sites!!! http://snarfed.org/ pyblosxom ajax comments jjj cmt_pubDate text/html asd http://snarfed.org/ pyblosxom ajax comments Gordon cmt_pubDate text/html Gecko http://snarfed.org/ pyblosxom ajax comments iman cmt_pubDate text/html thank u :) http://snarfed.org/ pyblosxom ajax comments oldman cmt_pubDate text/html wow http://snarfed.org/ pyblosxom ajax comments test cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments luke cmt_pubDate text/html neat http://snarfed.org/ pyblosxom ajax comments test cmt_pubDate text/html GROVEY http://snarfed.org/ pyblosxom ajax comments LOL cmt_pubDate text/html AJAX IS MY friend http://snarfed.org/ pyblosxom ajax comments kk cmt_pubDate text/html kkk http://snarfed.org/ pyblosxom ajax comments tetst cmt_pubDate text/html alright http://snarfed.org/ pyblosxom ajax comments robin cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments test cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments blah cmt_pubDate text/html blah http://snarfed.org/ pyblosxom ajax comments yeah cmt_pubDate text/html that is definitely cool! http://snarfed.org/ pyblosxom ajax comments roger cmt_pubDate text/html testing http://snarfed.org/ pyblosxom ajax comments testsan cmt_pubDate text/html 123 etst 456 http://snarfed.org/ pyblosxom ajax comments testatre cmt_pubDate text/html Description: Regardless of what you do using Ajax, they all rely on the same basic functions. This is a very small Ajax routine (less than 3 Kb) that enables you to easily use Ajax on your site to send "GET" or "POST" requests asynchronously. Some examples include getting the contents of an external HTML file, getting the contents of a XML file and return it as a DOM object, and sending information via PoST to a receiving PHP script (with the information being from either a form or any element on the page). It's easier than you think with the help of this routine! Here's a quick listing of the public variables and methods exposed by this routine: http://snarfed.org/ pyblosxom ajax comments af cmt_pubDate text/html asdas http://snarfed.org/ pyblosxom ajax comments af cmt_pubDate text/html asdas http://snarfed.org/ pyblosxom ajax comments foo cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments test cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments Flash Games cmt_pubDate text/html testing 1234 http://snarfed.org/ pyblosxom ajax comments dfdfg cmt_pubDate text/html dfgdfgdfgdfg http://snarfed.org/ pyblosxom ajax comments Yahzee cmt_pubDate text/html Just checking. Bye http://snarfed.org/ pyblosxom ajax comments SimonRaven cmt_pubDate text/html meh. actual posting isn't working. serving the js file out of a subdir, will try modding it to look where i stuck it. i did notice, however, that you have the plugin looking elsewhere is it doesn't find the script at root (/).

not sure what exactly could be wrong. i get the preview, but not the actual post, i get "Empty response from server." http://snarfed.org/ pyblosxom ajax comments Ajaxpert cmt_pubDate text/html Here is good tutorial for AJAX
Ajax Tutorial
go to Ajax link http://snarfed.org/ pyblosxom ajax comments Hulius cmt_pubDate text/html Testing... http://snarfed.org/ pyblosxom ajax comments Don`t let the spammers prevail cmt_pubDate text/html I hate spam.
Let the scum die and rot in the guts of the outernets. http://snarfed.org/ pyblosxom ajax comments qewrf cmt_pubDate text/html erfg http://snarfed.org/ pyblosxom ajax comments w5y6trrt cmt_pubDate text/html tyrt http://snarfed.org/ pyblosxom ajax comments tyhrth cmt_pubDate text/html tryjrtjrty http://snarfed.org/ pyblosxom ajax comments <script type="text/javascript">alert("haha");</script> cmt_pubDate text/html hahaha http://snarfed.org/ pyblosxom ajax comments <script type="text/javascript">alert("haha");</script> cmt_pubDate text/html <script type="text/javascript">alert("haha");</script> http://snarfed.org/ pyblosxom ajax comments XSS cmt_pubDate text/html XSS on preview! http://snarfed.org/ pyblosxom ajax comments ryan cmt_pubDate text/html with the script code above? looks like preview sanitizes it correctly. mind explaining a little more?

btw, if the XSS is only on preview, which would only be shown to the attacker themself, it doesn't seem like there's any threat. http://snarfed.org/ pyblosxom ajax comments testing cmt_pubDate text/html assasdaadsaasassda http://snarfed.org/ pyblosxom ajax comments sasda cmt_pubDate text/html aasdasdsadsadsaasdas http://snarfed.org/ pyblosxom ajax comments asdfasdf cmt_pubDate text/html asdf http://snarfed.org/ pyblosxom ajax comments testing cmt_pubDate text/html This is a test http://snarfed.org/ pyblosxom ajax comments aaa cmt_pubDate text/html aaa http://snarfed.org/ pyblosxom ajax comments Robert cmt_pubDate text/html Testing, pretty cool. http://snarfed.org/ pyblosxom ajax comments asdasd cmt_pubDate text/html asdasd http://snarfed.org/ pyblosxom ajax comments chief cmt_pubDate text/html helloz http://snarfed.org/ pyblosxom ajax comments lance cmt_pubDate text/html testing http://snarfed.org/ pyblosxom ajax comments Test cmt_pubDate text/html Dies ist ein Testeintrag =) http://snarfed.org/ pyblosxom ajax comments das ist ein test cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments Steve cmt_pubDate text/html test http://snarfed.org/ pyblosxom ajax comments dajul cmt_pubDate text/html I have this plugin working with pyblosxom.cgi, but I can't figure out how to make it work with static pages (rendering site with pyblcmd)

Any advice? Thanks http://snarfed.org/ pyblosxom ajax comments dajul cmt_pubDate text/html Ops, sorry... I forget: with static pages, when I preview or submit comments, all site is re-drawn inside the place where comments are supposed to be. After that, none comments are saved. http://snarfed.org/ pyblosxom ajax comments dajul cmt_pubDate text/html Finally, I did a RewriteRule on my hosting to clean cgi "ugly" URL :P
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^blog?(.*)$ /cgi-bin/pyblosxom.cgi$1 [last]
</ifModule>