Creating a Flashing Notice concluded - JavaScript

Example 4-13 displays the content of the JavaScript file, comments.js. Since the data is being updated, the Ajax call is a POST rather than a GET. Once the comment is saved, it's reflected back in the comment list with a yellow fade to highlight that it has been added to the list. This example uses the traditional yellow, beginning with a value of #ffff00 and ending with white, #ffffff. In addition, it uses the Adding Ajax bind technique for managing the timer events.

Example 4-13. Combining comment preview, Ajax send method, and yellow flash

// global
var commentCount = 0;
var xmlhttp;

function yellowColor(val) {
   var r="ff";
   var g="ff";
   var b=val.toString(16);
   var newval = "#"+r+g+b;
   return newval;
}

aaManageEvent(window,"load", function() {
  aaManageEvent(document.getElementById('save'),"click",saveComment);

});

function saveComment(evnt) {

  // cancel event bubbling
  evnt = evnt ? evnt : window.event;
  aaCancelEvent(evnt);

  // create XHR object
  if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest();
  if (!xmlhttp) return;

  // get comment
  var commentText = document.getElementById("comment").value;
  modText = commentText.split(/\n/).join("<br />");
  var param = "comment=" + modText;
  var url = 'addcomment.php?' + param;
  xmlhttp.open('POST', url, true);

  // send comment
  xmlhttp.onreadystatechange = addComment;
  xmlhttp.setRequestHeader('Content-Type',
    'application/x-www-form-urlencoded');
  xmlhttp.send(null);
  return false;
}
// add comment to existing list, with color flash
function addComment() {
  if(xmlhttp.readyState == 4 && xmlhttp.status==200) {
     var modText=xmlhttp.responseText;
     console.log(modText);
     var newDiv = document.createElement("div");
     commentCount++;
     newDiv.setAttribute("id","div"+commentCount);
     newDiv.setAttribute("class","comment");
     newDiv.innerHTML = modText;

     // add object to page
     document.getElementById("list").appendChild(newDiv);

     // start flash counter
     var ctrObj = new Counter("div"+commentCount,0,255);
     ctrObj.countDown(); 
  }
}

function Counter(id,start,finish) {
  this.count = this.start = start;
  this.finish = finish;
  this.id = id;
  this.countDown = function() {
    this.count+=25;
    if (this.count >= this.finish) {
       document.getElementById(this.id).style.background="transparent";
       this.countDown=null;
       return;
    }
    document.getElementById(this.id).style.backgroundColor=yellowColor(this.count);
    setTimeout(aaBindEventListener(this,this.countDown),100);
  }
}
aaManageEvent(window,"load",function() {
      aaManageEvent(document.getElementById('comment'),"keyup",echoPreview)});

function echoPreview(evnt) {
   var commentText = document.getElementById("comment").value;
   modText = commentText.split(/\n/).join("<br />");
   var previewElem = document.getElementById("preview");
   previewElem.innerHTML = modText;
}

From the top, when a comment is saved, the form submission is canceled because Ajax is being used to make the update. The comment is accessed and only simple processing is made on it before being POSTed through the XMLHttpRequest object. When the Ajax request is successfully processed, a new div element is created to host the comment, which is then appended to the existing list of comments. As the item is appended, the fade is flashed to highlight the addition.

The result of the final example is shown in Figure 4-3. Unfortunately, I'm not skilled enough with an image capture timer to catch the yellow fade, but the example is among those packaged for this book.

Figure 4-3.  Preview, Flash, and Ajax combined

Of course, this is a simplified look at how live comments and live updates can coexist. However, it could be easily integrated into an existing application by calling whatever server-side functionality is used for comments, which should also ensure that the comment text is safe. Then the comment can either be fetched from the function or from the database to be returned for display in the field. To the user, all of this should take a fraction of a second, and the result looks instantaneous. Best of all, no page reload occurs to add distraction. Scripting disabled? No problem, regular comment management is still part of the page.

This application is, in a way, Ajax in a nutshell: a combination of user interaction, Ajax requests, objects, timers, and visual effects. Pat yourself on the back; you're an Ajax programmer now. However, I wouldn't skip the rest of the book.