11
When you read this article, maybe you already have facebook account. In this social networking site we can commenting anythings. Every friends has a new status, we can write a comment. If one of our friends changed his/her photo, we can put a comment. More, one of the reason why we still come back to this site is because this feature.
According my estimated, almost 80% from all application process on facebook using Ajax method. So do with commenting application. When we click submit button after write a comment, the new comment will suddenly appear without reloading the page. While the new comment proceed to appear, saving data to database are working in back-and. How this process could be happen? I’ll explain you in this article.
Before read the rest, you can try the live demo or download the source code by clicking the link bellow.
Adding Comment Process
To make appear the new comment without reloading the page, we need to get existing comment. To do this we can use a Javascript method:
Name_id is a div name placed between existed comment. For example:
<!– list start –>
<div class=”Comment” id=”1″>
<div class=”SenderName”>Kandar</div>
<div class=”CommentDate”>23, April 2009</div>
<div class=”CommentContent”>This is my comment</div>
</div>
<div class=”Comment” id=”2″>
<div class=”SenderName”>Foo</div>
<div class=”CommentDate”>24, April 2009</div>
<div class=”CommentContent”>hellow world</div>
</div>
<div class=”Comment” id=”3″>
<div class=”SenderName”>Kandar</div>
<div class=”CommentDate”>23, April 2009</div>
<div class=”CommentContent”>This is kandar’s comment.r</div>
</div>
<!–list end–>
</div>
To get all comment start form <!– list start–$gt; to <!–list end–> we use method:
We can make a new variable named currentContent from this method:
Next, we need a variable to get value from comment form. This variable named commentValue.
To make this variable works, we need to create a form. The code is:
<p><label for=”name”>Name:</label> <input type=”text” name=”name” id=”name” />
<p><label for=”YourComment”>Comment:</label> <textarea name=”YourComment” id=”YourComment” /></textarea></p>
<p><input name=”Submit” type=”submit” value=”Submit” /></p>
</form>
Next, we have to create a function named postContents. The code goes like this:
/* Query value that send to php.*/
var commentValue = ‘name=’ + encodeURI( document.getElementById(’name’).value ) + ‘&YourComment=’ + encodeURI( document.getElementById(’YourComment’).value );
/*server side */
var send_to = ‘manage-comment.php’;
/*Div id for handle preloader image or errors.*/
var respons = ‘alert’;
postAjax(send_to, commentValue, respons, handleResponComment);
}
In the function above, we got a new function called postAjax. This is the function to send the value with Ajax method. For this process, we need a function to heandle XmlHttRequest.
var obj = ”;
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} else {
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp) {
alert(”Ops sorry We found some error!!”);
}
return xmlHttp;
}
Next, we need a function that works as a response handler after XmlHttpRequest process. We named this function handleResponComment. The code:
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
/*I more prefer use json as response value from php*/
var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);
if(JSONRespons.status == 1){
/*
* if inserting new commend succeed, then we call commentResponse function to show the new comment.
*/
commentResponse(JSONRespons);
}
else{
/*when new comment appeared, we have to re-enabel the form by calling enableForm() function using onload image event*/
document.getElementById(obj).innerHTML = JSONRespons.message + ‘<img src=”ajax-loading.gif” width=”0″ height=”0″ onload=”enableForm();”>’;
}
} else {
/*Incase we found errors on trancaction proccess.*/
document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;
}
}
else{
/*
* After submit new comment, we heve to diasable the form to prevent from re-submitng by user.
* Also, show the preloader image, so user know his comment is being proceed.
*/
document.getElementById(obj).innerHTML = ‘<img src=”ajax-loading.gif”>’;
document.getElementById(’name’).disabled=true;
document.getElementById(’YourComment’).disabled=true;
document.getElementById(’submit’).disabled=true;
}
}
To prevent user re-submit the form, we need to disable the form after they clicked the submit button. After all process done we have to activated the form again. The functions are:
/*re-enable the form after all process done. */
document.getElementById(’name’).disabled=false;
document.getElementById(’YourComment’).disabled=false;
document.getElementById(’submit’).disabled=false;
}
After saving new comment process works, its time to make appear new comment that just submitted. The function goes like this:
/*get listed comments*/
var current_contents = document.getElementById(’CommentList’).innerHTML;
/*Listed comments plus new comment that submited by user and inserted to database. */
var newComment = current_contents + ‘<div class=”Comment” id=”‘ + JSONRespons.message_id + ‘”><div class=”Remove”><a href=”javascript:deleteContent(’ + JSONRespons.message_id + ‘);”>Remove</a></div><div class=”SenderName”><img src=”ajax-loading.gif” width=”0″ height=”0″ onload=”enableForm();”>’ + JSONRespons.name + ‘</div><div class=”CommentDate”>’ + JSONRespons.date + ‘</div><div class=”CommentContent”>’ + JSONRespons.comment + ‘</div></div>’;
/*get current total comment */
var currTotalComm = document.getElementById(’numComment’).innerHTML;
/*current comment plus one */
document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) + parseInt(1);
/*show up the new listed comments*/
document.getElementById(’CommentList’).innerHTML = newComment;
/*reset the form*/
document.getElementById(’CommentForm’).reset();
/*remove the preloader image*/
document.getElementById(’alert’).innerHTML = ”;
}
Deleting Comment Process
Here is the three function that works to handle deleting process.
var postValue = ‘id=’ + messageID;
var send_to = ‘manage-comment.php’;
var respons = ‘alert’;
input_box = window.confirm(’Are you sure want to delete this comment?’);
if (input_box==true){
postAjax(send_to, postValue, respons, handleDeletedComment);
}
}
function handleDeletedComment(){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);
if(JSONRespons.status == 1){
deleteNow(JSONRespons.id);
}
else{
document.getElementById(obj).innerHTML = JSONRespons.message;
}
} else {
document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;
}
}
}
function deleteNow(id){
var delete_comment = document.getElementById(id);
var currTotalComm = document.getElementById(’numComment’).innerHTML;
document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) - parseInt(1);
delete_comment.parentNode.removeChild(delete_comment);
enableForm();
document.getElementById(’alert’).innerHTML = ”;
}
In back-and side, all process handle in manage-comment.php file.
So here is the guideline how to create Ajax comment. Hope this is can help you. Thanks for reading.
Back to top