AJAX Comment Preview
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:
- Not live updating (who’d have thought you’d need to specify the negative)
- All content filtered through WordPress ensuring solid WYSIWIGnitude
- 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.
Thank you very much for sharing your work. I have been looking for a plugin like this since a while and yours is perfect :)
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?
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.
[…] I should mention that an AJAX Comment Preview hack is also available : […]
another test
sd
blah blah weird test
test
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.
test
does it work?
You misspelled “forty” and the preview comment isn’t working for me in FF 1.5. :(
Heh – so I have. Oops. And it works fine for me in FF 1.5.0.1/Mac OS X.
testa
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.
On my site, and on most WordPress sites, images are not allowed in comments. Only the tags listed below are allowed.
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.
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
imgtags) 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.
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.
However, when I post the same text while logged off, I see only
in both the preview and the posted comment.
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.
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.
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
:)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.
This is a visit from Oslo, Norway, just to test.
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”?
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.
Thanks
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
is there anyway to force someone to preview before submitting? I read this cuts down on the ammount of comment spam you get…
[…] blogwaffe » AJAX Comment Preview (tags: ajax wordpress blogging) […]
cat typing
Hi
really cool pluggin !
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.
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
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!
This is not a lame testing comment, honestly. Depending on how this goes after I hit Preview – nice work! :)
olem, ser du dettan? :)
deneme işte bakalım nolcak :)
wheres the scipt going from here?
Twas brillig and the slithy toves did mire and gimble in the wabe… (I think that’s right)
Hey man, thanks for providing this to the world!
nice plugin!
Tested with Firefox and works! Thanks
Checking the preview, looks good. Very nice stuff my man.
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…?
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.
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