Technology and design in plain language.

(This article was cross-posted here at Learning Movable Type.)

I've never liked the idea of a seperate 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!<br />

// D.C.P. - Comment Text<br />

function ReloadTextDiv() {<br />

    document.getElementById('TextDisplay').innerHTML = '<p>'+document.getElementById('comment-text').value.replace(/(\r\n|\n)/g,'<br />').replace(/(<br \/>){2,}/gi,'<'+'/p><p>')+'<'+'/p>';<br />

}<br />

// D.C.P. - Comment Author<br />

function ReloadNameDiv() {<br />

document.getElementById('NameDisplay').innerHTML = document.comments_form.comment-author.value;<br />

}<br />

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

            </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?