« How to Make a Subject Index Using Tags | Main | Automatic Copyright Notice Year Update »

Dynamic Comment Previewing

By LMT contributor Jesse Gardner of PlasticMind and Movable Tweak. Article double posted at Movable Tweak

I've never liked the idea of a separate comment preview page. Besides being overkill, it often gets missed during upgrades and becomes just another bug to squash.

So after picking up some good ideas from Mike Industries, I decided to toss it to the curb and show our commenters just exactly what their comment will look like as they type.

I give you, dynamic comment previewing in three easy steps:

Step 1: Modify mt-site.js

Add the following code to the end of your mt-site.js and rebuild it:

// Dynamic Comment Preview - Kudos to Mike Industries for the inspiration!
// D.C.P. - Comment Text
function ReloadTextDiv() {
document.getElementById('TextDisplay').innerHTML = '<p>'+document.getElementById('comment-text').value.replace(/(\r\n|\n)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'/p><p>')+'<'+'/p>';
}
// D.C.P. - Comment Author
function ReloadNameDiv() {
document.getElementById('NameDisplay').innerHTML = document.comments_form.comment-author.value;
}
// End Dynamic Comment Preview

This is the javascript that powers the live comment preview. Our comment form will call to these functions while you're typing in the author field or the comment field and update the comment preview in realtime.

Step 2: Modify individual entry archives

We're now going to add the live preview "box" to your site. Provided here is the HTML that will work with the standard Movable Type templates. This should come directly after the closing </form> tag of your comment form.

...</form>
<div class="comments-content" id="preview">
<h3 class="comments-preview">Comment Preview</h3>
<div class="comment">
<div id="TextDisplay"></div>
<p class="comment-footer">Posted by:
<span class="author"><a href="#" id="NameDisplay">
<script language="Javascript" type="text/javascript">
<!--
var authname = getCookie("mtcmtauth");
document.write(authname);
//-->
</script>
</a>
</span>
</p>
</div>
</div>

You may need to modify the structure to fit your own style. Essentially, whatever element has the id "TextDisplay" will be filled with the comment text and whatever element has the id "NameDisplay" gets filled with the author name.

Step 3: Modify IEA's once more

We need to "activate" our form fields, or set them up to call to the D.C.P. javascript we put in mt-site.js earlier. Simply find the comment author field and add a call to the name reload function onkeyup. It should look something like:

<input id="comment-author" name="author" size="30" onkeyup="ReloadNameDiv();" />

Let's do the same thing for our comment text field. This time we're calling to the text reload function.

<textarea id="comment-text" name="text" rows="10" cols="30" onkeyup="ReloadTextDiv();"></textarea>

Just be sure that the id's you use on there form elements match the id's in your mt-site.js or else you wont get any updating.

And finally, the moment we've all been waiting for. Remove the preview button from your template. It looks something like this:

<input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" />

Rebuild and give it a try. Gives commenting a whole new 'zing', doesn't it?

Comments (12)

Debbie:

It saves you time too. Sometimes I forget what story I'm commenting about. haha!

Whoah, this is cool Jesse!

It's nice to see this addition to movable type, and I really appreciate the effort of the author.

Very nice script. Thanks.

(BTW, there's a problem with signing in TypeKey. I received Configuration Error message.)

Umm J:

Oh, that IS cool. Just wanted to test it out!

Works like a charm, but for one problem:

The Comment Preview I'm using here is ABOVE this comment box, but in the code you've given, it falls BELOW the comment box, which is much less easy to follow.

I see I'm a little late in responding so I hope you're still around

Hey Olney!

Elise decided (and rightly so) that from a usability standpoint, putting the comment preview above the comment text area is much better.

This is easy to change. All you need to do is put that whole chunk of code from Step 2 right before your comment text area and right after your comment fields. In fact, you can put it pretty much wherever you want on a page (sidebar, etc.), you just want to be sure that it's visible while the commenter is typing in their comment.

Oye Jesse!

That fixes it - the Comment Preview is above the comment box just like here.

HOWEVER, I now have the following problem.

I'm using the Compare plugin to differentiate between my posts and other posts. It sets just below the MTCommentsHeader, as per instructions. I tried to move it but was yelled at during Rebuild.

Until I moved Step two below the fields (Remember personal info? etc) and above

etc it worked fine. Now all posts are the color of my posts.

Why, O Jesse, why?

Above all, thanks for the quick reply.

Peer Sanderson:

Dear Jesse,

thanks for the input.
i am still using WordPress, but might switch oder to Moveabletype. Hmmm...

Thanks,
Peer

Olney: It's likely just a placement of tags. It all goes in logical order, so you may just have to play around with that. If you'd like, shoot me an email with your code and I'll see if I can find the problem...

Olney Garkle:

Thanks Jesse,

I'll shoot you the pertinent code in a separate email.

Hi everyone!

Lately, I've been trying to implement something like this, but using markdown. It may be overkill to refactor the whole markdown engine into JS just for the sake of live comment previewing. Thus, I've been working on an AJAH request firing with the blur event. The other option was a function timing the typing user, firing the event if he's not typing for longer than a second or so.

Of course, I'd like to have your opinion, Jesse.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)