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.
AJAX comment support is copyright 2006 Ryan Barrett, and is distributed under the GPL. Thanks to Todd Warner and Blake Winton for beta testing and improvements.
See also:
112 Comments
Hmm, this does look cool.
Whoah, looks cool. I’d never dream that pyblosxom would even get AJAX.
And the previewing, OMG, faints
So fresh and so clean!
just checking out the ajax gadget…:)
sdfsdfs
Testing this Ajax comment thingy.
Pretty.
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
This is a test of the ajax comments.
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", notsrc="/plugins/comments.js". comments.py is hard-coded to serve it from the/comments.jsURL.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.
Its great
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.
argh. sorry for the trouble, todd.
i see what you mean about
comments.js. it is supposed to be in theplugins/dir, butcomments.pycan only serve it if pyblosxom handles requests for the/comments.jsURL. 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'inconfig.py, then check for “AJAX request: …” log messages to see if pyblosxom is correctly rendering the response.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. ;)
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.
sdasdaasd
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!
fdsfsdfd
dffdfd
%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F
Test
as
k
Coooool!
sdfdsf
<b><font color=green>Bold</font>/b>
%u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB
neat
This is a test of the comments
Test
jgvouhvoyh
testing
kkk
nice
Awesome
dasdsadsa
test
d
Realy nice!
est
cool!!
dom
great work!
mmm
test
ruyturuy
Great, going to implement on my site soon!
ererewrwe
testing
Yes – I like berry berry maach!
Good one. Like it. :)
gfgg
cool tool will be implementing it with my sites!!!
asd
Gecko
thank u :)
wow
test
neat
GROVEY
AJAX IS MY friend
kkk
alright
test
test
blah
that is definitely cool!
testing
123 etst 456
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:
asdas
asdas
test
test
testing 1234
dfgdfgdfgdfg
Just checking. Bye
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.”
Here is good tutorial for AJAX
Ajax Tutorial
go to Ajax link
Testing…
I hate spam.
Let the scum die and rot in the guts of the outernets.
erfg
tyrt
tryjrtjrty
hahaha
<script type=”text/javascript”>alert(“haha”);</script>
XSS on preview!
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.
assasdaadsaasassda
aasdasdsadsadsaasdas
asdf
This is a test
aaa
Testing, pretty cool.
asdasd
helloz
testing
Dies ist ein Testeintrag =)
test
test
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
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.
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>
Very nice
test
dfasdfasdfasdf
test test test
!
testing!
Previewing works fine. However, posting gives me the following message: A software error occurred. Please contact the administrator.
another test
asd asd asd asd asd asd
There only few good resources for Ajax beginners. I now only php tutorial and w3schools