pyblosxom ajax comments

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 used to run this site, uses a plugin to handle commenting. This patch adds AJAX support to that plugin.

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.

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.

118 thoughts on “pyblosxom ajax comments

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

    And the previewing, OMG, faints

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

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

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

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

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

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

  8. 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!

  9. %u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB%u05D3%u05D2%u05DB

  10. 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:

  11. 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.”

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

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

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

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

  16. Previewing works fine. However, posting gives me the following message: A software error occurred. Please contact the administrator.

Leave a Reply

Your email address will not be published.