Display content dynamically with AJAX

dangtruong

Author lv2 (5100/10000)

2,705 views

4 Comments

(4 votes, average: 4.50 out of 5)

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.

[source:html]

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

[/source]

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.

[source: javascript]

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

That ’s all. Simple, right ?