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