12.10.2018

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.  
    Mustang 02.16.2006 @ 07:21

    Thank you very much for sharing your work. I have been looking for a plugin like this since a while and yours is perfect :)

  2.  
    C. Freitag 02.20.2006 @ 03:18

    I don’t get it to work. Installed the two files “as-is”. This is the result:

    The Preview button is displayed but clicking it doesn’t do anything, not even the action indicator of Firefox is “spinning”. There is no display of a preview pane, not even a “blank space” for it.

    What do I have to change in the plugin code or my template? Does it matter that only registered users can comment on my blog?

  3.  
    MDA 02.20.2006 @ 10:48

    The plugin is almost garaunteed not to work ‘as-is’. You have to edit the top two sections so that it matches the HTML of your WordPress template. The first section should look the same as the HTML of one of your comments. In the second section, you must tell the plugin what the IDs are of the various elements in the comment submission form.

    Since I can’t see what everything looks like on your site, that’s the best help I can offer.

  4.  

    […] I should mention that an AJAX Comment Preview hack is also available : […]

  5.  
    me 03.10.2006 @ 08:29

    another test

  6.  
    sd 03.11.2006 @ 23:01

    sd

  7.  
    test 03.12.2006 @ 08:32

    blah blah weird test

  8.  
    Adam 03.14.2006 @ 03:23

    test

  9.  
    Jar Jar 03.15.2006 @ 19:04

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

  10.  
    test 03.16.2006 @ 01:58

    test

  11.  
    test 03.17.2006 @ 22:06

    does it work?

  12.  
    Stine 03.20.2006 @ 23:50

    You misspelled “forty” and the preview comment isn’t working for me in FF 1.5. :(

  13.  
    MDA 03.21.2006 @ 21:42

    Heh – so I have. Oops. And it works fine for me in FF 1.5.0.1/Mac OS X.

  14.  
    test 03.23.2006 @ 15:58

    testa

  15.  
    Thomas Lee Elifritz 03.31.2006 @ 18:02

    Is it just me, or my implemetation of this, or does this NOT work with HTML images (img src) etc. I do know that live comment preview handles the images fine.

  16.  
    MDA 04.01.2006 @ 00:16

    On my site, and on most WordPress sites, images are not allowed in comments. Only the tags listed below are allowed.

  17.  
    Thomas Lee Elifritz 04.03.2006 @ 12:28

    Right, I see that, no image tags allowed on your site, but on my site, I allow any HTML, and your AJAX comment preview still does not handle them properly. Have you actually tested it fully, or is it perhaps something I’ve done wrong? It handles the standard text markup tags, but images don’t make it.

  18.  
    MDA 04.03.2006 @ 12:56

    Thomas, I tried putting an image in your comments section. The Live Preview plugin may display it, but your installation of WordPress filters it out as it should; allowing anyone to put arbitrary markup on your site (even img tags) is a huge security risk.

    That’s the real strength, as I see it, of my plugin. It peviews the comment exactly as it will appear after WordPress has its way with it, assuming you have the plugin’s template configured properly and that you’re not doing anything to the comment after it’s been sent to the client’s browser (e.g., with JavaScript).

    If you don’t believe me, I encourage you to disable my plugin (or even all plugins) on your site and see what happens when you post an image.

  19.  
    MDA 04.03.2006 @ 13:14

    Thomas, I see the problem a bit better now. You must be logged in as an administrator to post arbitrary HTML (whereas other users are not). Non admins cannot. Perhaps you were not logged in when you were testing image posting.

    My plugin respects both admin and non-admin scenarios (again, simply because it does whatever WordPress does); everything still works for me on my site. When I can type the following into the comment box,

    A .ico image: <img src="http://blogwaffe.com/blogwaffe.ico" />

    I see the following in both the preview and the posted comment when I post as an administrator.

    A .ico image:

    However, when I post the same text while logged off, I see only

    A .ico image:

    in both the preview and the posted comment.

  20.  
    Thomas Lee Elifritz 04.03.2006 @ 13:18

    I saw your comment, but you made some typing errors, which I fixed, so the image displays properly. Apparently I’ve got it all configured properly, because image posting worked before I installed your plugin, and it works now after I installed it, once I fixed your typos. The script or the filters just don’t allow them to preview.

    My clock was off an hour from the time change, so the comment editing function was disabled, but I’ve fixed that now as well.

  21.  
    Thomas Lee Elifritz 04.03.2006 @ 13:20

    Oh, I understand now, thanks. The question I have, is did the image preview through your AJAX preview comment script, when you were logged in as administrator? I often test as a user, so maybe I just was a user when I tried it.

  22.  
    MDA 04.03.2006 @ 13:27

    Yes, when logged in as an admin, the image shows up in both the preview and the actual post. When not logged in as an admin, the image does not show up in either place.

    See, Live Preview lies. My plugin doesn’t :)

  23.  
    Thomas Lee Elifritz 04.03.2006 @ 13:48

    That’s great! Thanks! I think I got it all straight now.

    That was an interesting, but tiresome, exercise, but I did learn something. These new AJAX websites are very difficult and tedious to debug online. One has to decide what will be faster, reading the gnarly javascript and PHP code, or testing. BTW, with my Blackletterhead theme (a modified Kubrick), the script/plugin worked almost out of the box, as you have designed it.

  24.  
    Harald Larsen 04.04.2006 @ 03:17

    This is a visit from Oslo, Norway, just to test.

  25.  
    Emile 04.04.2006 @ 06:32

    Wow, that’s seriously cool. Thanks for making the plugin. Don’t you hate it when people can’t be more creative than just saying “test”?

  26.  
    John Eye 04.05.2006 @ 04:02

    You’ve obviously conquered the previewing world, ain’t it great if we can get our soldiers to the editing world now.

    Thanks for the plugin.

  27.  
    mehdi 04.12.2006 @ 06:14

    Thanks

  28.  
    Pierre 04.15.2006 @ 04:21

    The king’s a beggar, now the play is done:
    All is well ended, if this suit be won,
    That you express content; which we will pay,
    With strife to please you, day exceeding day:
    Ours be your patience then, and yours our parts;
    Your gentle hands lend us, and take our hearts.

  29.  
    acklee 04.23.2006 @ 13:17

    I’m Googled for “AJAX Commenting” and found link to this post. It’s cool, very informative and I decide to install AJAX Comment Preview in my WordPress blog. Thanks a lot

  30.  
    Tom 04.24.2006 @ 08:30

    is there anyway to force someone to preview before submitting? I read this cuts down on the ammount of comment spam you get…

  31.  

    […] blogwaffe » AJAX Comment Preview (tags: ajax wordpress blogging) […]

  32.  
    tom 05.07.2006 @ 00:51

    cat typing

  33.  
    Chris 05.08.2006 @ 06:29

    Hi
    really cool pluggin !

  34.  
    anonymous coward 05.15.2006 @ 03:33

    Exactly what i was looking for, it’ll be even cooler, if it had a live preview feature. Well, maybe it has, but as i’m hot for testing it, i didn’t check any further, yet. Thanks anyway. A lot.

  35.  
    Jane 06.02.2006 @ 08:57

    While I would love to test this out, the plugin is giving me an error message:

    Fatal error: Call to undefined function wp_nonce_field() in C:\wamp\www\wordpress\wp-content\plugins\ajax-comment-preview.php on line 153

  36.  
    MDA 06.02.2006 @ 09:17

    Jane, Sorry about that. That’s a bug I accidentally introduced into the new version yesterday. I’ve just tweaked it now so that it should work for you. Please let me know how it goes.

    Though… you wouldn’t have noticed the bug if you had already upgraded to WordPress 2.0.3.

    Thanks for the feedback!

  37.  
    Koray 06.26.2006 @ 17:50

    For if there is a sin against life, it consists perhaps not so much in despairing of life as in hoping for another life and in eluding the implacable grandeur of this life.

    -Albert Camus

  38.  
    Daze 07.03.2006 @ 04:00

    This is not a lame testing comment, honestly. Depending on how this goes after I hit Preview – nice work! :)

  39.  
    Svennis 08.28.2006 @ 13:34

    olem, ser du dettan? :)

  40.  
    denemeq 08.31.2006 @ 11:07

    deneme işte bakalım nolcak :)

  41.  
    albob 10.06.2006 @ 03:33

    wheres the scipt going from here?

  42.  
    Andy 12.05.2006 @ 09:58

    Twas brillig and the slithy toves did mire and gimble in the wabe… (I think that’s right)

  43.  
    Dan 12.05.2006 @ 22:59

    Hey man, thanks for providing this to the world!

  44.  
    dsone 12.13.2006 @ 08:59

    nice plugin!

  45.  
    jon 12.14.2006 @ 01:48

    Tested with Firefox and works! Thanks

  46.  
    Dean 01.01.2007 @ 19:20

    Checking the preview, looks good. Very nice stuff my man.

  47.  
    Grant 01.06.2007 @ 12:59

    Nice, but is is possible to submit without having to reload the page. Presumably, when you submit, you can make the “preview” add it to the actual list and post the comment to the database (or whatever) at the same time…?

  48.  
    virtualscribe 01.24.2007 @ 14:18

    I think the very large bandwidth throughput has made developers a bit lax about serving up long documents. A really good addition would be an AJAXY pagination function. 10-25 comments on a page would be good; I am commenter 101 and it takes a bit to get to the end of this document to post.

  49.  
    Francesco Minciotti 01.30.2007 @ 15:43

    A test comment, indeed not totally useless: I’m going to teach you some italian words related to WP: “pannello di controllo” means “backoffice”; “articolo” is “post”; “titolo” is “topic”; “commento” mean “comment”; “pubblicare” is “to publish”.
    If you’ll ever talk to an italian blogger, you can sport with your superiority in tongues :D

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