Adding Comments to Web Pages

Want to know what reader are thinking of your article? You can install a complete content management system, and spend some week to move your pages and try to let the system look as you previous website, or to use a standalone, easy to install specialized tool.

The comment system is very simple:
- each page that has to be commented, has a companion XML file that holds all the comments for this page.
- when the article is displayed, the content of the XML file is loaded dynamically by an Ajax script and the comment displayed at bottom of the page.
- an authentification script is used also with an XML file to store the logins, passwords, e-mail addresses, etc...

The demo

For the demonstration, a single comment may be entered by the reader and it is saved into the demo-comment.xml file, then the current page is reloaded, the XML file is loaded by an Ajax script, and the content is parsed and displayed at bottom of this page.

Here is the code that scans the XML file using the getElementByTagName() and getElementById() DOM's methods. See at the DOM tutorial for more infos.

function processData(doc)
{ 
  var element = doc.getElementsByTagName('login').item(0);
  document.getElementById("login").innerHTML= element.firstChild.data; 
  document.getElementById("comment").innerHTML= 
    doc.getElementsByTagName('comment').item(0).firstChild.data; 
} 

The real application

In the real application, a login and password are checked first, the comment will be added to an XML file with other comments and the content of this file is dynamically added to the web page at loading. Boxes will be created for each comment.
A complete manager allowing to view and delete comments will be further available to complete the tool.
The template of your pages have to include the JavaScript code.

Testing the demo

1) Add a comment below and your login (type anything).
Click on the "Add comment" button.

2) The page is reloaded and the login and the comment are displayed in the box at bottom.

Download and sources

Download the archive of the demo.

View the XML file
View the JavaScript file
View the XML file builder