12.05.2020

06.14.2005

AJAX Comment Preview

Filed under: blogging,neat! @ 19:09

UPDATE: The documentation for this plugin is now on my AJAX Comment Preview page. All the talk below of the installation being hard is out of date. Things are much easier now.

I’ve looked around occasionally for a good comment preview plugin for the site. There’s a few “Live” preview plugins around, but I find an as-you-type update of your comment really annoying. Plus, those plugins are entirely javascript based; they can’t know what the server will do to a comment after it gets sent off, so it’s not robustly WYSIWIG.

There seemed to be no good pre-fab solution fitting all my criteria:

  1. Not live updating (who’d have thought you’d need to specify the negative)
  2. All content filtered through WordPress ensuring solid WYSIWIGnitude
  3. Delicious AJAX goodness to avoid hard refreshes

So I made my own.

Well, not entirely. I was inspired by the Live Textile Preview Plugin by Jeff Minard which is itself inspired by and an adaptation of some AJAX code written by chregu:bitflux.ch.

You, an avid and dedicated reader of this site, type in a comment and click “Preview”. The information you enter is sent back to my server via the snazzy XMLHttpRequest Javascript object. The server then decides how to format that information (where part of this decision is the filtration of the information through WordPress’ content filtration system – the real advantage of this method). The newly formatted information is then sent back to your browser where you can see exactly how your comment will look once you submit it.

If your browser doesn’t have all the clever bits necessary for all this, fear not. You can forego the comment previewing and just submit the comment as usual.

Testing

I get a number of comments on this post testing the system. A little odd, since it seems to me people should be testing the preview functionality (which is new) not the comment posting functionality (which is the same old WordPress standard stuff). Anyway, that’s cool. Go ahead. But please do me a favor; don’t just thow up some lame “testing” comment. Try sending over a poem or maybe something from the Farmer’s Almanac. Tell me your favorite book/artist/music. Don’t suck; try to be creative.

99 Comments

  1.  
    Jeff 06.14.2005 @ 21:35

    Wow, that’s totally awesome. I was thinking this would be a great improvement for my Live Comment Preview plugin. Perhaps there’d be some way to work them together….

  2.  
    MDA 06.14.2005 @ 22:27

    The installation isn’t very clean. To make the preview look like the output, you have to edit one of the files (and likely your CSS as well) so it comes out right.

    I can show you what I’ve got (I’ve really only added a few lines of code here and there) if you’re interested (though, naturally, you can see the JS for yourself anytime :)).

  3.  
    Adam 06.15.2005 @ 00:54

    So, I believe that Paul had a live preview going at one point, and that I complained about it. The problems with live preview:

    1) Most of the time, I’m looking at what I’m typing, and since most of what I type is generic text, I don’t need it to show up in a preview window. It’s rare that I put something like a link into a comment.

    2) Lag. Generally speaking, the live preview is a few characters behind my typing, which really bothers the hell out of me.

    3) Changes in the content of the page, if not handled properly, result in the page scrolling up and down, or re-rendering, making things jerky and distracting.

    It looks like your user-submit preview function works pretty well. Good job. But, I’d have to say that you should avoid live previews.

  4.  
    MDA 06.15.2005 @ 11:32

    I’ve switched to using the POST method rather than GET in case someone tries to post a ridiculously long comment. I think all still works.

    Also, the curious and exacting should note that this implementation isn’t strictly AJAX; the data sent back and forth isn’t XML. It certainly could be, but it seemed a bother for something so simple. Plus, I think there’s some Opera compatibility issues with real AJAX (please correct me if I’m wrong).

    Oh, and Adam, Thanks. I tend to agree about live previewing. It seems a “because it was there” idea rather than “because it’s useful” to me. But it’s a matter of taste.

  5.  
    suavisimo 06.15.2005 @ 12:46

    la la la la la la, I can type whatever I want without submitting and preview it! I can say what a stupid jerk Mike is. Or say his sister is really hot. And he’ll never know!

  6.  
    MDA 07.01.2005 @ 11:49

    I’m getting a lot of hits here. If anyone wants to see the PHP, I can clean it up and post it somewhere.

  7.  
    Paul.za 07.02.2005 @ 23:09

    I’d be interested. Of course, I could just open my mouth and ask, since we’re sitting in the same room. Nah.

  8.  
    MDA 07.06.2005 @ 12:16

    Fancy colorized version:
    ht tp://www.blogwaffe.com:8000/wp-content/ajax-comment-preview.phps

    Easily downloaded/copy and pasted version:
    http://blogwaffe.com/wp-content/ajax-comment-preview.txt

    The JS file you can find yourself :)
    But is here:
    http://blogwaffe.com/wp-content/ajax-comment-preview.js

    There’s a couple little bugs, to one of which I know the fix (but have not gotten around to fixing), into the other of which I have not looked.

    Note that you have to customize the variables and the output template defined in the ajax-comment-preview.php file to match your template.

  9.  
    Pingback from Deltoid » Comment preview 07.08.2005 @ 21:58

    […] By popular request, I’ve installed a comment preview plugin. I’d tried a live preview, but it didn’t display Markdown. Now with a preview and a spell check you can avoid making a mistake in a comment and having Tim Blair write a whole series of posts about your mistake. […]

  10.  
    MDA 07.20.2005 @ 12:21

    I’ve hunted down and squished (I think) the bugs I mentioned previously. The code is still ugly, but it works better now.

  11.  
    Alastair 07.20.2005 @ 17:34

    This looks really nice, could it be packaged as a plugin? This would really simplify the wordpress upgrade procedure.

  12.  
    MDA 07.20.2005 @ 20:20

    The original comment above has been altered to reflect the new file locations. There are only two files now, the plugin and the javascript it requires.

    To use this plugin, both files must be in your wp-content/plugins/ directory. If you choose to place them in a subdirectory, both files must be in the same directory.

    This is not a simple “download and activate” plugin; it must be customized. You must alter the variables and the output template defined in the plugin file to match your site’s template.

    Fancy Colorized Version
    Easy Text Version
    Necessary JavaScript

  13.  
    Adam 07.21.2005 @ 23:52

    Something still isn’t working with Opera. It just says “Loading..” in the preview section.

  14.  
    Jason 07.24.2005 @ 16:32

    Testing from Opera

  15.  
    Jason 07.24.2005 @ 16:33

    Testing from firefox

  16.  
    Alastair 07.24.2005 @ 17:29

    Unfortunately Comment Preview seems to conflict with WP Hashcash, my anti-spam du jour.

    Also I had to comment out the leading slash in the processURI variable (line 44) and the script src attribute (line 49) to get it to work in Safari.

  17.  
    MDA 07.24.2005 @ 17:49

    That’s unfortunate about Hashcash. A lot of people use it (and by all accounts it’s awesome). If they conflict, there’s not a lot of hope I’ll be able to fix it on my end; Hashcash is beyond my understanding. I’d encourage other people to try the two together, though, just to see.

    It works fine for me on Firefox, Safari and Opera (I’m running the latest versions for OS X). However, the preview_htmlpath() function is not the most robust. It could be that your server is configured a bit differently than mine. I’ve just now trimmed the output as a sanity check.

  18.  
    MDA 08.01.2005 @ 17:34

    Something about testing a preview plugin by posting an actual comment is highly amusing to me. Keep them coming.

  19.  
    Joe 08.12.2005 @ 06:42

    Testing the fancy shmancy comments :)

  20.  
    Mathias 08.18.2005 @ 02:15

    Testing… This is friggin’ neat.

  21.  
    Jan- 08.29.2005 @ 10:33

    Uh, I want to try.

  22.  
    blacknight 09.01.2005 @ 00:51

    Great! Seems to be exactly what I was looking for. Thanks for this excellent piece of code!

  23.  
    Griztown 09.19.2005 @ 16:25

    mike, I’m trying to get this dohicky working on my blog. Don’t know much though about this sort of thing. In your txt file I get the impression I should edit the %1$s and %2$s variables? Should I also edit the four variables below that? Keep in mind I know nothing about templates and stuff. I guess what I’m saying is, if I need to edit them, what do I edit them to?

  24.  
    MDA 09.20.2005 @ 12:44

    You need to edit them to match your markup. This might work.

    $out = '<cite>%1$s Says: <br />';
    $out .= '<small class="commentmetadata">' . date('F jS, Y \a\t g:i a', time() + get_settings('gmt_offset') * 3600) . '</small>';
    $out .= '%2$s';
    return $out;

    It doesn’t look like you need to change the other four variables.

    Note, though, that I’ve heard this plugin doesn’t work with WP-Hashcash.

  25.  
    Griztown 09.20.2005 @ 14:30

    Thanks Mike. I do have WP-Hashcash on my blog but I tried your plugin with it deactivated and it still didn’t work. But then again I can’t get the spell checker to work either. Perhaps I’m not the computer geek I thought I was.

  26.  
    Mark 09.24.2005 @ 15:47

    This is just a test. A really big, interesting test.

  27.  
    JV 09.28.2005 @ 09:15

    Anyone care to offer up an install howto for WordPress sophomores?

    This is already pretty cool, but would be the cat’s pajamas if it supported Markdown.

  28.  
    otama 10.04.2005 @ 14:15

    I really love it!!!
    Ill try to use it on my site ….
    i hope it will work :D

  29.  
    Sarah 10.05.2005 @ 13:06

    Has anyone managed to get this working on K2 yet? I’ve tried installing it with the Ajax commenting (that K2 supports) enabled and disabled but have had no luck at all. I’m not running Hash Cash, just a few fairly innocuous ones. I used ot use ‘LivePreview’ but that won’t work on K2 now either and this plugin looks really sweet. And I know a few people who like to preview before they post.

    *presses the wondrous button…

    Ahhhh…. I so want to make this work on my blog. :(

  30.  
    Paul.za 10.07.2005 @ 10:03

    Uh, is it just me who’s wondering why someone needs AJAX-enhanced commenting on top of a mountain?!? Maybe running the server nearer sea-level might give it enough air pressure to cool the chips, which is what I’m guessing the problem is.

  31.  
    loui 10.15.2005 @ 17:09

    This is just a test.

  32.  
    Joe 10.23.2005 @ 14:58

    WooooooHoooo!

  33.  
    Jack 11.07.2005 @ 18:49

    Cool, we love Ajax.

  34.  
    F.H. 11.15.2005 @ 15:28

    testing the functionality, want to use this hopefully somewhere, but i guess it’s always good to see it in action, sorry for being so annoying

  35.  
    Joey 11.22.2005 @ 08:39

    Testing this cool thing out. :) Nice!

  36.  
    Angalee 11.23.2005 @ 12:56

    testing comments and preview.
    I love the green color scheme.

  37.  
    MDA 11.28.2005 @ 23:37

    OK – This sucks.

    Feel free to test the ol’ girl out, but please (for my sake) try to come up with something more interesting than “testing”. A poem, perhaps. Something from the Farmer’s Almanac. Maybe tell me your favorite book/artist/music. Don’t suck; try to be creative.

    UPDATE: I deleted some of the more useless comments.

  38.  
    Rob 12.08.2005 @ 21:56

    test

  39.  
    Angalee 12.14.2005 @ 10:10

    Untitled

    There’s the wonderful love of a beautiful maid,
    And the love of a staunch true man,
    And the love of a baby thats unafraid-
    All have existed since time began.
    But the most wonderful love, the love of all loves,
    Even greater than the love for Mother,
    Is the infinite, tenderest, passionate love
    Of one dead drunk for another.

    ~ Anonymous ~

  40.  
    Will 12.23.2005 @ 04:58

    Hey,

    I can not get this to work for the life of me. :(

    Here is what comments.php looks like:

    " id="comment-">
    "> () Says:

    comment_approved == '0') : ?>
    Your comment is awaiting moderation.

    "> at

    at |
    Top

    I’ve tried everything i can think of for the function preview_template() { part of the plugin but nothing works.

    Any ideas?

  41.  
    Will 12.23.2005 @ 05:17

    ok that did not go right

    so please see:

    http://www.willsdownloads.com/blog/ajax_comments_test/

    thanks a lot for any help,

    will

  42.  
    The_ROb 12.23.2005 @ 10:15

    Just testing your ajax comment

  43.  
    Canthlian 12.27.2005 @ 05:46

    Testing, for Opera hates me.

  44.  
    Willy 12.27.2005 @ 13:57

    testing…. wow, works really great ! :D Two thumbs up.

  45.  
    Pingback from The Digital Memoirs of An Old Soul 12.27.2005 @ 22:08

    […] Ajax commenting, a live comments feature that enables the user to post a comment in-line in the post’s page without having to refresh the page, has now been installed and appears to work without a hitch in IE and Firefox. It requires Java-script to work properly, and I’ve a few more tests to do before I can determine whether users who are unable to use Ajax commenting still can post using the traditional form method. […]

  46.  
    Jamie 01.19.2006 @ 19:59

    Does this work with 2.0?

  47.  
    Juan 01.20.2006 @ 23:14

    testing juan

  48.  
    Huh? 01.26.2006 @ 23:23

    So how does this work again? Whats so great about it?

    OK. Weird. I guess that’s an improvement.

  49.  
    Pingback from OddThinking » Blog Software Upgrades 02.08.2006 @ 19:45

    […] I’ve rejected Live Comment Preview, due to user feedback, and configured AJAX Comment Preview. (Is that cheering I can hear in the background really all the way from Germany?) […]

  50.  
    Dave 02.11.2006 @ 00:45

    Thank you very much for the tips. So much info about AJAX commenting and your the only one with a preview tutorial.

    Worked on my site with a little hacking. Thanks again.

© mdawaffe (Michael D Adams) - Powered by WordPress - Full Credits