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.
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.
Testing
99 Comments
Sorry, the comment form is closed at this time.
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….
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
:)).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.
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.
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!
I’m getting a lot of hits here. If anyone wants to see the PHP, I can clean it up and post it somewhere.
I’d be interested. Of course, I could just open my mouth and ask, since we’re sitting in the same room. Nah.
Fancy colorized version:
ht tp://www.blogwaffe.com:8000/wp-content/ajax-comment-preview.phpsEasily 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.phpfile to match your template.[...] 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. [...]
I’ve hunted down and squished (I think) the bugs I mentioned previously. The code is still ugly, but it works better now.
This looks really nice, could it be packaged as a plugin? This would really simplify the wordpress upgrade procedure.
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 VersionEasy Text Version
Necessary JavaScript
Something still isn’t working with Opera. It just says “Loading..” in the preview section.
Testing from Opera
Testing from firefox
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.
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.
Something about testing a preview plugin by posting an actual comment is highly amusing to me. Keep them coming.
Testing the fancy shmancy comments :)
Testing… This is friggin’ neat.
Uh, I want to try.
Great! Seems to be exactly what I was looking for. Thanks for this excellent piece of code!
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?
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.
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.
This is just a test. A really big, interesting test.
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.
I really love it!!!
Ill try to use it on my site ….
i hope it will work :D
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. :(
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.
This is just a test.
WooooooHoooo!
Cool, we love Ajax.
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
Testing this cool thing out. :) Nice!
testing comments and preview.
I love the green color scheme.
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.
test
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 ~
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?
ok that did not go right
so please see:
http://www.willsdownloads.com/blog/ajax_comments_test/
thanks a lot for any help,
will
Just testing your ajax comment
Testing, for Opera hates me.
testing…. wow, works really great ! :D Two thumbs up.
[...] 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. [...]
Does this work with 2.0?
testing juan
So how does this work again? Whats so great about it?
OK. Weird. I guess that’s an improvement.
[...] 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?) [...]
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.
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