Preview Comments Live
PLEASE NOTE: This is NOT my script. REPEAT. NOT my script. I would LOVE to give credit to the originator, but because I'm a DUFUS, I never made a note of it. I linked to a post on the MT boards that described how to do this, but since the MT board changed servers, that link doesn't even point to the right thread anymore. If you recognize this script as the one you wrote… PLEASE PLEASE tell me so I can give you the credit you're due. 
I've been requested a number of times to explain how I do that "preview your comment live" thing…. It's really very simple…
Put this in your head tags somewhere:
<script type="text/javascript" LANGUAGE="Javascript">
<!–
function ReloadTextDiv()
{
var NewText = document.getElementById("DynamicText").value;
var DivElement = document.getElementById("TextDisplay");
DivElement.innerHTML = NewText;
}
//–>
</script>
Where you want the Live Preview to show up, but this:
<span id="TextDisplay"></span>
Inside the textarea tag for your comment text box, add these two attributes:
id="DynamicText" onKeyUp="ReloadTextDiv();"
(so in other words, your tag may look something like this:
<textarea name="text" rows="10" cols="40" id="DynamicText" onKeyUp="ReloadTextDiv();"></textarea>
That should be it… without having the original instructions to reference, I hope I didn't leave anything out. Let me know if you have any troubles implementing it.
April 15th, 2004 at 1:34 am
Just because I want to. UP
February 22nd, 2004 at 9:31 am
I did a lot of work on the Goob this morning – got the streaming cam up and running with lots of help from Lisa. I still have to get ahold of her today to figure out the flash version…
February 22nd, 2004 at 8:12 am
I did a lot of work on the Goob this morning – got the streaming cam up and running with lots of help from Lisa. I still have to get ahold of her today to figure out the flash version…
January 9th, 2004 at 11:06 am
Converting journal from b2 to MT.
January 10th, 2004 at 1:18 am
I'm finally converting my journal from b2 to movabletype. Here's why and a list of articles/plugins/tricks I implemented in my new MT journal…
December 1st, 2003 at 12:54 am
I fixed the comment subscriptions, so y'all should be set now. I'm not currently using MT-Blacklist, so I need to know if subscribers have any…
December 16th, 2003 at 9:34 pm
Ok, so you guys have already noticed the changes, but I will tell you again. The comments submission form has…
August 10th, 2003 at 2:10 am
I just wanted one central place where I could record all the little dodads that make this site tick. Plugins MT Paginate MT Entry If Comments Global Listings MT Other Blog Smarty Pants Simple Comments Archive Date Header Word Count…
December 1st, 2003 at 12:38 am
I'm organizing BB and deleted the posts revolving around my techie mess from earlier in the week, since it was an easy fix. I like…
July 21st, 2003 at 2:21 am
The 'Live Comment Preview' hack that I use on The Long Letter has now been implemented here on Eclecticism.
July 22nd, 2003 at 6:28 pm
After seeing this on ScriptyGoddess' site, I wanted to implemented it. After a few more searches, however, I found this piece of code on Alieniloquent's site. This version parses the line breaks so that it will show what it'll look…
May 15th, 2003 at 11:38 am
i'm not sure how i initially found this post at the long letter blog [i like its slogan though: "please…
July 6th, 2003 at 1:36 am
Live comment preview allows commentors to see what their comment will look like as they type it. It's a neat trick, although it works best if you have your comment posting form on the individual entry archive page or otherwise…
July 7th, 2003 at 10:58 pm
I wanted to toss this up really quickly before I crashed out tonight — over the course of the evening, I've tossed in a few very cool tweaks to my blog setup.
July 19th, 2003 at 1:26 am
Recently I added a comment preview script to my comment section. I was asked by Etan over at toomuchsexy.blog how…
February 21st, 2003 at 9:27 am
Live Preview your Comments in MT. The script is not that hard to add, Just follow the easy guide at ScriptyGoddess
February 25th, 2003 at 10:22 pm
Ok… it's not exactly brilliant code-fu (template-fu, etc), but I needed to make some changes around here, and this is what I came up with. Comments are no longer in
February 2nd, 2003 at 6:26 pm
Since I added the collapsible/expanding entries code yesterday, that means more content to load up when people come to my
January 13th, 2003 at 12:56 am
A couple days ago, Phillip found my 'Live Comment Preview' and incorporated it into his blog. However, not satisfied with what I had, he improved the code so that it recognizes and inserts linebreaks correctly!
January 21st, 2003 at 10:20 pm
Gotta give some mad props to Scripty Goddess for this hella cool live preview script. Well she didn't write it,
November 6th, 2002 at 10:45 am
I am gamely trying to fix (or at least avoid) a pesky error that is causing certain comments to be
January 2nd, 2003 at 6:19 pm
Thanks for the comments folks, I appreciate the thoughts a lot:) I found the Live Preview at Scripty Goddesses though
January 3rd, 2003 at 1:35 am
OK, so in toto, I updated the comment form to include Trackback (In and Out) information and added the Live
January 11th, 2003 at 2:59 pm
Thanks to Jennifer and Sara, I have implemented the "Live Preview" feature in my comments popup page. As you type your comment in the comments field, you will be able to see it live right above the form. Cool, huh!?
January 12th, 2003 at 10:29 pm
Check out the new feature in the comments. You can now preview your pithy brilliance as you type. Just in case you care about typos and the like. Oh, and because I'm mean and anything other than bolding, italics and links breaks my comments box on the …
September 2nd, 2002 at 5:20 pm
I wanted to toss this up really quickly before I crashed out tonight – over the course of the evening, I've tossed in a few very cool tweaks to my blog setup. First off, the month-by-month archive listings (listed beneath the calendar on the right unde…
September 27th, 2002 at 8:01 am
scriptygoddess
May 28th, 2004 at 10:41 pm
Thank you very much for the awesome script. I love it. Thanks again.
May 23rd, 2004 at 4:09 pm
An adapted version, in order to be xhtml valid and to catch carriage returns (looks better "live"):
Change the script in the header to this:
<script type="text/javascript">
<!–
function ReloadTextDiv()
{
var NewText = document.getElementById("DynamicText").value;
NewText = NewText.replace(/\n/g, '<br />');
var DivElement = document.getElementById("TextDisplay");
DivElement.innerHTML = NewText;
}
//–>
</script>
- it may not make much sense the way I've barely explained it, but try it – I promise you'll like it
April 10th, 2004 at 6:43 pm
I think this script is fantastic, and have installed it at my weblog
April 15th, 2004 at 1:33 am
May 21st, 2004 at 10:01 pm
Has anyone found a way to make this work with MT3? Since takes the place of actual form tags, there's no way for me to edit the textarea box.
December 28th, 2003 at 6:27 am
I just read about this on Al Mujahaba's site. I think am going to use this – it's neat!
July 18th, 2003 at 10:54 pm
Any chance that there could be exploits done with this script? I ask this because it seems to be implementing code directly onto your server without running it through any possible filter, I could technically implant php code right onto your server which would only be active during this one session, but it is still a security risk.
August 3rd, 2003 at 10:31 pm
Hi Jennifer, nice article. I've write a similar one, it's here
http://f14web.com.ar/inkel/2003/07/30/comment_preview_with_js_and_dom.html
I would like to see your comments. Regards,
inkel
November 2nd, 2002 at 5:27 pm
It fails on that 'key-up' evant, but only on the Indiv Arch and Only on the A Href tags..
The code looks good, its really odd.
March 8th, 2003 at 11:29 pm
I tried putting this script in my blog and it did not work, i followed instructions step by step, and nothing!
March 9th, 2003 at 3:42 pm
Problem in the code – forgot to comment the –> line.. I've just updated the post with the fix… (if you're using this code and it's working – then you shouldn't be affected… you probably already have that in there)
March 10th, 2003 at 8:00 pm
I got it fixed
For all of you that are still looking for solutions, check this out:
<textarea id="text" name="text" rows="10" cols="50"></textarea>
turns into:
<textarea name="text" rows="10" cols="50" id="DynamicText" onKeyUp="ReloadTextDiv();"></textarea>
Notice the id="text" is gone in the second one, thats what didnt let the script work, or at least, for me.
November 2nd, 2002 at 3:43 pm
[EDITED]
…see if there's something you left out? – I know that it won't always immediately preview, until you have a "key-up" event…
October 30th, 2002 at 5:31 pm
This is a great little script. It works fabulously. Thanks Jen!
November 2nd, 2002 at 11:34 am
Repost from MT forums:
I installed the Live preview comments from scriptygoddess and it works great in the comment popup and 90% in the individual archive.
The problem is that its doesn't parse any A HREF tags in the individual archive and anything past that no longer shows up.
I used the same code in the same spots, the same way. Could somebody look at an individual archive and see if they can spot what might be the problem? I am tired of staring at my screen..
Reply #1:
…..The error doesn't come for me until I type my end > and then it tells me there's an Unknown Runtime Error on line 107, which is where the Script for the live preview is in the head.
August 28th, 2002 at 10:40 am
Amy, if you want this to work in your comments, place everything in your "comment listing" template; I placed the javascript in the <head> there and the span id line just below the comment box (see it in action <a href="http://www.deliriouscool.org">here</a> by clicking on the comment link). I also did the same thing on my Individual Entries Archive, because I have comments enabled there too. Hope this helps!
August 28th, 2002 at 12:04 pm
Thanks, Donna! I actually ended up using a different scriptygoddess script, which was the extended entries and comments script. That one is exactly what I'd been looking for!
September 1st, 2002 at 6:49 am
Firstly, thanks much – works wonderfully!
Now, a question – any idea how possible it would be to hack this into the post entry form within MT? I gave it a shot tonight, but it didn't work…not sure where I goofed.
In brief, I put the javascript code into the <head> twice (changing the function names to ReloadTextDiv1() and Reload TextDiv2(), and pointing one to DynamicText1 and one to DynamicText2), added a <td> to the right side of the table, put two <span> tags in with the right classes, then added onkeyup calls to the two text entry fields (main and additional text), pointing them each at a seperate function. In my head, it should work…no luck, though.
It's entirely possible I just mistyped something somewhere (it is 3:45am…ouch!), but I figured I'd run this through here and see if the concept seemed sound to others, as well as me.
Thanks in advance…
Woody
August 9th, 2002 at 6:07 pm
I like this script. It only doesn't display my smilies
August 20th, 2002 at 5:43 pm
There must be something I'm not getting, because it's not working for me.
Is it PHP-only? I'm still in the learning stages on PHP.
Is there any way you – or someone else – could provide an example of where the span id part goes? I've tried several different places, and nothing's happening. I'm using MT. Thanks for any help – and I've read the disclaimer, so I'll understand if there's no time to get back to me.
August 5th, 2002 at 3:06 pm
Yeah, Jenn… thanks!
July 4th, 2004 at 1:37 am
I love this script. I got it to work on MT. Today I switched to WordPress and was just wondering if this could for WordPress as well.
I think it could, but I am a scripting noob so I'd like to know what I get myself into.
Eventhough its an older post, I hope you don't mind me bringing this up.
July 4th, 2004 at 7:38 am
For WP – the best place to start looking is the wiki. There's a whole section dedicated to plugins.
I believe the "Live Preview" plugin does this.
July 4th, 2004 at 4:37 pm
Thanks Jennifer. It works fine for wordpress, which is actually no surprise.
What is though is that textile doesn't work with live preview
Traditional formating tags do.
Do you have a thought on that?
I searched here and there, but nobody seems to comment on it.
July 9th, 2004 at 1:08 am
Marius: that's because with Textile and other similar plugins the formatting is changed after the user clicks submit. You could probably try calling those functions at every keypress, but I wouldn't recommend it.
and I propose another change, for UI friendliness:
<script type="text/javascript">
<!–
function ReloadTextDiv()
{
var NewText = document.getElementById("DynamicText").value;
NewText = NewText.replace(/\n/g, '<br />');
var DivElement = document.getElementById("TextDisplay");
if (NewText.length > 0) { DivElement.innerHTML = NewText; }
else { DivElement.innerHTML = "(blank)"; }
}
//–>
</script>
July 9th, 2004 at 1:10 am
p.s. (marius: it works perfectly fine with WordPress as it is. You just have to remember to edit the wp-comments.php file as well as the index.php file.)
November 19th, 2004 at 5:08 am
Hope you don't mind but I'm just testing out this live comments thing…
November 19th, 2004 at 9:43 am
The site's been redesigned and I am no longer using this script on here… So… there's nothing to test out.