No Comment

OK, it's time for me to eat some crow. My approach to incorporating a simple comments facility into an ordinary Web page didn't work out as well as I envisioned it would. But let me tell you about it anyway, why not? (At the least you can have a good laugh at my expense.)

The HTML

The first thing we need is a text field into which the user can enter a comment: the most basic choice for this field is a textarea box (that's what Blogger uses - check the source of this page). Second, we should put a text box for the user's identity/name just above the textarea box. Third, after the textarea box we'll want a button that when clicked posts the user's comment.

<form id="inputForm" action="" method="">
Your Name: <input id="nameInput" name="username"><br>
Type your comment into the field below:<br>
<textarea id="commentTextarea" name="usercomment" cols="50" rows="10"></textarea><br>
<button id="commentButton" type="button">Click here to post your comment</button>
</form>

We will load the user's comment into a commentDiv div, which we'll place above the inputForm form:

<div id="commentDiv"></div>
<form id="inputForm" action="" method="">
...

Comment display

We can display the user's comment and identity by writing the values of the commentTextarea and nameInput fields to the innerHTML property of the commentDiv div. The innerHTML property was introduced by Microsoft for IE 4, has long had cross-browser support, and is currently on track to be standardized in a DOM Parsing and Serialization specification.

document.getElementById("commentButton").onclick = function ( ) {
    document.getElementById("commentDiv").innerHTML += document.getElementById("commentTextarea").value + "<br>"
    + "- posted by: " + document.getElementById("nameInput").value + "<br><br>";
    document.getElementById("commentTextarea").value = ""; }

The preceding function also clears the textarea box by setting its value to an empty string.

Remembering the user

Naturally we will want to display the user's identity in the nameInput field if the user returns to our page; we can do this by putting the identity in an HTTP cookie when the button is clicked

/* Add the following code to the commentButton.onclick function: */
var expDate = new Date( );
expDate.setFullYear(expDate.getFullYear( ) + 1);
document.cookie = "myTotallyUniqueCookieName=" + encodeURIComponent(document.getElementById("nameInput").value)
+ "; expires=" + expDate.toUTCString( );

and then retrieving the identity and writing it to the nameInput field's value upon a return visit.

window.onload = function( ) {
    var nameIndex = document.cookie.indexOf("myTotallyUniqueCookieName");
    if (nameIndex != -1) {
        var valueIndex = document.cookie.indexOf("=", nameIndex) + 1;
        var endstr = document.cookie.indexOf(";", valueIndex);
        if (endstr == -1) endstr = document.cookie.length;
        document.getElementById("nameInput").value = decodeURIComponent(document.cookie.substring(valueIndex, endstr)); } }

Setting the cookie

• The cookie's expDate expiration date is set one year into the future by the setFullYear( ) command.

• It is left to the reader to come up with a suitable myTotallyUniqueCookieName for the cookie's name attribute value.

• The encodeURIComponent( ) operation will be unnecessary for most user identities - we wouldn't need it for a Joe, a Mary Ann, or a reptile7 - but at least when using Safari we would need it (and its companion decodeURIComponent( ) operation in the window.onload function) for a name like Günther or Thérèse that strays outside the ASCII character range.

Getting the cookie

• Mozilla's current stringObject.indexOf( ) page is here.

• The document.cookie property gives a name1=value1; name2=value2; ... return for the cookies it holds. The nameIndex variable indexes the starting m of myTotallyUniqueCookieName; for a first-time visit, nameIndex is -1 and therefore nothing happens. The valueIndex variable indexes the first character of the user input we are fishing for; the endstr variable bounds the end of the user input.

Demo

In the iframe below:
(1) Enter your name or other identity into the Your Name field.
(2) Type something into the textarea box; your textarea input may contain any mixture of text and HTML markup*.
(3) Click the button.
(*If I may make a little suggestion, use
<span style="color:red;">This is red text</span>
for your textarea entry and see what you get.)



The isolated iframe src page is here - check its source for the full coding.

There's just one not-so-little problem with my comments facility. The innerHTML assignment does not permanently write a comment to the page: refresh the page and the comment will be gone. Relatedly, other users will not see your comment and you won't see their comments. Clearly, this is something you cannot do solely on the client side; it is necessary to store comments on the server side and then use the comments to dynamically write the page for its users. (Man, did I dream up this idea before my morning coffee or something?)

---

We'll wrap up the "Notes on the Bluebird Template" series in the following entry - we'll chat a bit about what happens in the document head and then maybe I'll have a few comments about the so-called "Simple" template that this blog uses.