snarfed.org

draw group stream of consciousness

pyblosxom ajax comments

Wed, 01 Jan 2003 [comments (99)] [history] [rdf] [raw]

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.

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:

comment bubble OpenID Nick Moffitt, Sun 03 Sep 2006

Hmm, this does look cool.

comment bubble OpenID Wari, Sun 03 Sep 2006

Whoah, looks cool. I'd never dream that pyblosxom would even get AJAX.

And the previewing, OMG, faints

comment bubble OpenID Maulik, Tue 05 Sep 2006

So fresh and so clean!

comment bubble OpenID ranjit, Tue 05 Sep 2006

just checking out the ajax gadget...:)

comment bubble OpenID dsf, Wed 06 Sep 2006

sdfsdfs

comment bubble OpenID Todd, Wed 13 Sep 2006

Testing this Ajax comment thingy.

Pretty.

comment bubble OpenID Todd, Wed 13 Sep 2006

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

comment bubble OpenID Jesus Rodriguez, Mon 18 Sep 2006

This is a test of the ajax comments.

comment bubble OpenID Ryan, Mon 18 Sep 2006

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.

comment bubble OpenID Alvaro, Tue 19 Sep 2006

Its great

comment bubble OpenID Todd, Wed 20 Sep 2006

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.

comment bubble OpenID Ryan, Wed 20 Sep 2006

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.

comment bubble OpenID Todd, Thu 21 Sep 2006

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. ;)

comment bubble OpenID Todd, Fri 22 Sep 2006

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.

comment bubble OpenID adasddas, Wed 04 Oct 2006

sdasdaasd

comment bubble OpenID Ryan, Wed 04 Oct 2006

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!

comment bubble OpenID sdfdsfsd, Wed 25 Oct 2006

fdsfsdfd

comment bubble OpenID fdf, Fri 27 Oct 2006

dffdfd

comment bubble OpenID %u9519%u8BEF%u4FE1%u606F, Mon 30 Oct 2006

%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F%u9519%u8BEF%u4FE1%u606F

comment bubble OpenID name, Thu 09 Nov 2006

Test

comment bubble OpenID s, Sun 12 Nov 2006

as

comment bubble OpenID kk, Mon 13 Nov 2006

k

comment bubble OpenID Cool, Tue 14 Nov 2006

Coooool!

comment bubble OpenID dfsdf, Tue 14 Nov 2006

sdfdsf

comment bubble OpenID <font color=red>Red</font>, Tue 14 Nov 2006

<b><font color=green>Bold</font>/b>

comment bubble OpenID %u05D2%u05D3%u05DB%u05D3%u05D2%u05DB, Tue 14 Nov 2006

%u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB

comment bubble OpenID blah, Sat 18 Nov 2006

neat

comment bubble OpenID deKay, Mon 20 Nov 2006

This is a test of the comments

comment bubble OpenID m, Wed 22 Nov 2006

Test

comment bubble OpenID khgv, Tue 28 Nov 2006

jgvouhvoyh

comment bubble OpenID lyricsfly, Tue 28 Nov 2006

testing

comment bubble OpenID iii, Thu 30 Nov 2006

kkk

comment bubble OpenID joe, Fri 01 Dec 2006

nice

comment bubble OpenID Andrew, Sun 03 Dec 2006

Awesome

comment bubble OpenID dsadsadsa, Mon 04 Dec 2006

dasdsadsa

comment bubble OpenID michael, Sat 09 Dec 2006

test

comment bubble OpenID s, Sat 09 Dec 2006

d

comment bubble OpenID Didzis, Mon 11 Dec 2006

Realy nice!

comment bubble OpenID What, Tue 12 Dec 2006

est

comment bubble OpenID paige, Mon 18 Dec 2006

cool!!

comment bubble OpenID dom, Mon 18 Dec 2006

dom

comment bubble OpenID rob, Fri 29 Dec 2006

great work!

comment bubble OpenID a designer, Fri 29 Dec 2006

mmm

comment bubble OpenID test, Thu 11 Jan 2007

test

comment bubble OpenID ytu, Fri 12 Jan 2007

ruyturuy

comment bubble OpenID Lock Picking Guide, Fri 19 Jan 2007

Great, going to implement on my site soon!

comment bubble OpenID rewww, Wed 24 Jan 2007

ererewrwe

comment bubble OpenID JB, Fri 26 Jan 2007

testing

comment bubble OpenID Peej, Sat 27 Jan 2007

Yes - I like berry berry maach!

comment bubble OpenID Web designer, Sun 04 Feb 2007

Good one. Like it. :)

comment bubble OpenID gfgffg, Mon 12 Feb 2007

gfgg

comment bubble OpenID dimo, Thu 15 Feb 2007

cool tool will be implementing it with my sites!!!

comment bubble OpenID jjj, Thu 15 Feb 2007

asd

comment bubble OpenID Gordon, Sat 17 Feb 2007

Gecko

comment bubble OpenID iman, Tue 20 Feb 2007

thank u :)

comment bubble OpenID oldman, Wed 21 Feb 2007

wow

comment bubble OpenID test, Tue 13 Mar 2007

test

comment bubble OpenID luke, Tue 13 Mar 2007

neat

comment bubble OpenID test, Wed 14 Mar 2007

GROVEY

comment bubble OpenID LOL, Wed 14 Mar 2007

AJAX IS MY friend

comment bubble OpenID kk, Sun 18 Mar 2007

kkk

comment bubble OpenID tetst, Sun 25 Mar 2007

alright

comment bubble OpenID robin, Thu 31 May 2007

test

comment bubble OpenID test, Sun 29 Jul 2007

test

comment bubble OpenID blah, Fri 10 Aug 2007

blah

comment bubble OpenID yeah, Sat 11 Aug 2007

that is definitely cool!

comment bubble OpenID roger, Sat 18 Aug 2007

testing

comment bubble OpenID testsan, Mon 10 Sep 2007

123 etst 456

comment bubble OpenID testatre, Sun 23 Sep 2007

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:

comment bubble OpenID af, Tue 25 Sep 2007

asdas

comment bubble OpenID af, Tue 25 Sep 2007

asdas

comment bubble OpenID foo, Fri 12 Oct 2007

test

comment bubble OpenID test, Wed 17 Oct 2007

test

comment bubble OpenID Flash Games, Wed 17 Oct 2007

testing 1234

comment bubble OpenID dfdfg, Fri 09 Nov 2007

dfgdfgdfgdfg

comment bubble OpenID Yahzee, Sat 17 Nov 2007

Just checking. Bye

comment bubble OpenID SimonRaven, Mon 19 Nov 2007

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."

comment bubble OpenID Ajaxpert, Tue 27 Nov 2007

Here is good tutorial for AJAX
Ajax Tutorial
go to Ajax link

comment bubble OpenID Hulius, Wed 05 Dec 2007

Testing...

comment bubble OpenID Don`t let the spammers prevail, Fri 01 Feb 2008

I hate spam.
Let the scum die and rot in the guts of the outernets.

comment bubble OpenID qewrf, Tue 19 Feb 2008

erfg

comment bubble OpenID w5y6trrt, Fri 22 Feb 2008

tyrt

comment bubble OpenID tyhrth, Tue 26 Feb 2008

tryjrtjrty

comment bubble OpenID <script type="text/javascript">alert("haha");</script>, Tue 26 Feb 2008

hahaha

comment bubble OpenID <script type="text/javascript">alert("haha");</script>, Tue 26 Feb 2008

<script type="text/javascript">alert("haha");</script>

comment bubble OpenID XSS, Tue 26 Feb 2008

XSS on preview!

comment bubble OpenID ryan, Tue 26 Feb 2008

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.

comment bubble OpenID testing, Sun 02 Mar 2008

assasdaadsaasassda

comment bubble OpenID sasda, Sun 02 Mar 2008

aasdasdsadsadsaasdas

comment bubble OpenID asdfasdf, Tue 04 Mar 2008

asdf

comment bubble OpenID testing, Sun 09 Mar 2008

This is a test

comment bubble OpenID aaa, Thu 13 Mar 2008

aaa

comment bubble OpenID Robert, Mon 17 Mar 2008

Testing, pretty cool.

comment bubble OpenID asdasd, Tue 25 Mar 2008

asdasd

comment bubble OpenID chief, Sat 29 Mar 2008

helloz

comment bubble OpenID lance, Sun 30 Mar 2008

testing

comment bubble OpenID Test, Wed 02 Apr 2008

Dies ist ein Testeintrag =)

comment bubble OpenID das ist ein test, Sun 27 Apr 2008

test

comment bubble OpenID Steve, Sun 04 May 2008

test

Post a comment...



Simple HTML and wiki markup are allowed.