Display content dynamically with AJAX

We want to design a commenting system where visitors of your website can leave a comment on a news post. The form for submitting a comment should only be visible when a “post comment button” is clicked. The comment form should be displayed without reloading the web page.

The solution

To get this behaviour we are going to use AJAX (Asyncronous Javascript And XML) which is perfect for these kind of problems. With AJAX it is possible to send requests via Javascript that updates the webpage wiithout the need of a page refresh.

We start with the html code that we later will integrate with a Javascript to reveal the hidden textbox. Create a new file and call it comments.html.

</p> <p><div style=’width:400;border: 5px solid #000000;margin: 4 auto;padding:10px;’><br /> <b>My news post</b><br><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultrices magna eget<br /> nunc. Pellentesque consequat dui sit amet leo. Maecenas a est. Donec justo nunc,<br /> egestas vitae, consequat ac, aliquet ut, nisl. In suscipit nibh vitae lacus.<br /> Pellentesque sapien odio, imperdiet vitae, scelerisque quis, ultricies a, pede.<br /> Nullam feugiat<br /> <br><br><br /> <a href=”javascript:showForm(’comment’);”>Post your comment</a><br /> <div id=”comment” style=’display:none’><br /> <form id=”commentform” method=”post” action=”#” style=position: relative; z-index: 1><br /> <textarea name=”newpost” rows=”5″ cols=”45″>Your comment here</textarea><br><br /> <input type=”submit” value=”SEND” class=”button” name=”postcomment”/><br /> </form><br /> </div><br /> </div></p> <p>

Important things to note with this code is

javascript:showForm(’comment’);

that calls the javascript function ShowForm when the link is clicked on. Also note the code

<div id=”comment” style=’display:none’>

that creates a div with the id “comment” and hides this div by default.

With the html code out of the way we can move on to the javascript part that is supposed to reveal the hidden div when the “post comment” link is clicked. To do this we add the following code to our html file.

</p> <p><script><br /> function showForm(divID)<br /> {<br /> var elem, vis;<br /> if( document.getElementById ) // this is the standard way<br /> elem = document.getElementById(divID);<br /> else if( document.all ) // this is how older msie versions work<br /> elem = document.all[divID];<br /> else if( document.layers )// this is how netscape works<br /> elem = document.layers[divID];<br /> vis = elem.style;<br /> // if the style.display contains no value we try to figure it out<br /> if(vis.display==”&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)<br /> vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?’block’:'none’;<br /> vis.display = (vis.display==”||vis.display==’block’)?’none’:'block’;<br /> }<br /> </script><br />

That ’s all. Simple, right ?