Live Comment Previews

Hope you all had a good Christmas! In response to the most queries I’ve ever received about the site (both of Hicksdesign’s readers asked about this one!), here’s an explanation of the live comment previews I’ve started using.

While looking for a solution to MovableType’s cgi-only comment preview pages (cgi means no php includes) I discovered an alternative - live comment previews. An article at Scriptygoddess, explained how javascript can be used to write form information to a <div>, refreshing everytime a key is pressed. It’s pretty basic, no line breaks of html previews, just the raw text, but the <div> could reuse the same CSS as your comments. Leading on from this, there was an enhanced version posted at Glimpse of a Girl which allowed line breaks to be shown.

There are 2 pieces of form information that I needed previewing - the author’s name and the comment body. As author names won’t need line breaks, I’ve used the simpler version for former, and the enhanced version for the latter. Here’s the complete set, with the <id> changed to suit Movable Type’s defaults of ‘text’ and ‘author’.

// live comment preview  - comment body
    function ReloadTextDiv()
    {
        var NewText = document.getElementById("text").value;
        splitText = NewText.split(/\n/);
        var DivElement = document.getElementById("TextDisplay");
        var i = 0;
        DivElement.innerHTML = '';
        for(i = 0; i < splitText.length; i++) {
          if(splitText[i].length > 0 ) {
            DivElement.innerHTML += splitText[i] + "<br />";
          }
        }
    }
    // live comment preview - author
    function ReloadNameDiv()
    {
    var NewText = document.getElementById("author").value;
    var DivElement = document.getElementById("NameDisplay");
    DivElement.innerHTML = NewText;
    }

Then the onkeyup events were added to the relevant form elements:

<input id="author" onkeyup="ReloadNameDiv();" />
    <textarea id="text" rows="10" cols="50" onkeyup="ReloadTextDiv();">
    </textarea>

This just left 2 things. First, as the script relies on the ‘onkeyup’ event, it won’t preview the author name when the ‘remember personal info’ cookie and javascript autofills the form. To get around this, I reused a piece of the Movable Type code to make sure that the name is autofilled in the preview as well:

    <script type="text/javascript">var authname = getCookie("mtcmtauth");
    document.write(authname)
    </script>

Finally, it needed the latest date to be added. You can do this with Javascript too, but I’ve used a simple php code. If the format I’ve used doesn’t fit with yours, all you need to do is change the ‘d.m.y’ part. There is a full list of all the formats at php.net.

Posted on <?php $today = date("d.m.y");
    print "$today"; ?>

Here’s there whole preview markup:

    <div class="comment">
    <h3>preview</h3>
    <p class="author"><a href="#" id="NameDisplay">
    <script type="text/javascript">var authname = getCookie("mtcmtauth");
    document.write(authname)
    </script></a>:</p>
    <div id="TextDisplay"></div>
    <p class="posted">Posted on <?php $today = date("d.m.y");
    print "$today"; ?></p>
    </div>

Its not perfect, but it negates the need to use a basic cgi page, and retains the sites look and navigation content.