Comment system with jQuery, Ajax and PHP.
Wall Script
Follow Me:
Friday, June 12, 2009

Comment system with jQuery, Ajax and PHP.

This time I had developed Comment system with out refreshing page with jQuery, Ajax and PHP. In this application I had implemented with gravatar image. It's is useful and simple just some lines of code. Take a look at the live demo effect.


Updated Version :Click Here


Download Script     Live Demo


javascript code.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function()
{
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
if(name=='' || email=='' || comment=='')
{
alert('Please Give Valid Details');
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
}return false;
}); });
</script>



comment.php
Contains HTML code here class timeline li{display:none}
<ol id="update" class="timeline">
</ol>
<div id="flash"></div>
<div >
<form action="#" method="post">
<input type="text" id="name"/>Name<br />
<input type="text" id="email"/>Email<br />
<textarea id="comment"></textarea><br />
<input type="submit" class="submit" value=" Submit Comment " />
</form>
</div>

commentajax.php
Contains PHP and HTML code.
<?php
if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
$lowercase = strtolower($email);
$image = md5( $lowercase );
mysql_query("SQL Comment table insert statement");
}
else { }
?>

<li class="box">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=
<?php echo $image; ?>"/>
<?php echo $name;?><br />
<?php echo $comment; ?>
</li>

More jQuery and Ajax Tutorials : Take a look at this link

275 comments:

  1. The javascript is some obtrusive: when you disable javascript the form doesn't work. Better is posting to an existing page. With jQuery, you could change the action and do your AJAX thing.

    ReplyDelete
  2. hey ... this is a very good script but what i wanted to know was that if i practically add something like this on my website then where do i store my comments .. how is this script going to change. please help me with this.... waitin..

    ReplyDelete
  3. Yes where to store the comments :)

    ReplyDelete
  4. Comments will store in database table..

    CREATE TABLE comments
    (
    com_id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(25),
    email VARCHAR(25),
    comment TEXT
    );


    Edit " commentajax.php " SQL Statement

    mysql_query("INSERT INTO comments (name,email,comment) VALUES ('$name','$email','$comment') ") ;

    ReplyDelete
  5. thanks for the fast reply , my mean is too keep
    the comment on the page like when the comment
    just come also

    this character ' is transform to /

    can we make clicable link from the comments ?

    thanks and very good job :)

    ReplyDelete
  6. exactly what i was looking for, thanks

    ReplyDelete
  7. nice script but how to keep the comments visible ??

    ReplyDelete
  8. hello! i love the script.. so i tried to change it a bit.. can you please show me how to add an input there as file? i want to add upload file using that script... please help me...

    ReplyDelete
  9. Looks perfect, thanks.

    ReplyDelete
  10. Can I get some clarification on what I need to do in order to store my posted comments here?

    Namely, a better explanation of the following:

    "Comments will store in database table..

    CREATE TABLE comments
    (
    com_id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(25),
    email VARCHAR(25),
    comment TEXT
    );


    Edit " commentajax.php " SQL Statement

    mysql_query("INSERT INTO comments (name,email,comment) VALUES ('$name','$email','$comment') ") ; "

    ReplyDelete
  11. Add one more column in "Comments" table

    CREATE TABLE comments
    (
    com_id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(25),
    email VARCHAR(25),
    comment TEXT;
    post_id INT // article or post ID
    );

    Alread comments table created.. use below statement.

    ALTER TABLE comments ADD post_id INT;



    Srinivas Tamada.
    9lessons blog author

    ReplyDelete
  12. $dbhost = 'localhost';
    $dbuser = 'root';
    $dbpass = 'password';

    $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');

    $dbname = 'commentbox';
    mysql_select_db($dbname);


    Any help would be appreciated

    ReplyDelete
  13. My last comment cut off my question :S

    I want to set up an SQL database to allow these comments to be saved. I have a basic knowledge of databases, but can anyone tell me how I set up the information I posted above to allow the comments to be saved?

    The blog author's suggestion confused me slightly

    ReplyDelete
  14. Can anyone help me with selecting the comments from the database and displaying them in the same format? I can save them successfully but of course when you refresh the page they disappear.

    ReplyDelete
  15. ::lost::

    At this point I have a DB created, but even in reading everything here have no idea what I need to do next to be able to save these comments. I expected to actually see something in either comment.php or commentajax.php that asked me for the DB name, user and pass - something where'd I'd just plug these in and be good to go.

    I need a "for dummies" version if someone should feel inclined. :/

    ReplyDelete
  16. Hi DsurioN

    Displaying existing Comments.

    Step: 1
    -------------------------------------
    <ol id="update" class="timeline">

    Include Step:2 Code here

    </ol>
    --------------------------------------


    Step:2
    --------------------------------
    <?php
    // Here 23 (post_id) article id
    $sql=mysql_query("select * from comments where post_id='23' ");
    while($row=mysql_fetch_array($sql) )
    {
    $name=$row['name'];
    $email=$row['email'];
    $comment=$row['comment'];
    $lowercase = strtolower($email);
    $image = md5( $lowercase );
    ?>
    <li class="box">
    <img src="http://www.gravatar.com/avatar.php?gravatar_id=
    <?php echo $image; ?>"/>
    <?php echo $name;?><br />
    <?php echo $comment; ?>
    </li>
    <?php
    }
    ?>
    ------------------------------------

    ReplyDelete
  17. hi Srinivas,

    Very nice comment system , but i have one question , is it possible to make this script work in other languages such as Arabic ( right to left languages).

    If so please tell me which files need to be changed...

    Thanks man.

    ReplyDelete
  18. Thanks for keeping it simple. Just what I needed.

    JIm

    ReplyDelete
  19. Hi Srinivas,

    Can we have the final script with all the feature
    request ? to be more clear im sure it's easy for you
    but just for newbies like me :)

    ReplyDelete
  20. How can I revert the order where the li elements are placed? They are always placed 1 under the other... I would like to put one on topp of the other.
    I tried changing $("ol#update li:FIRST").fadeIn("slow");
    but it didnt work...
    is there another way?

    ReplyDelete
  21. Hi Srinivas,
    Actually i m making a social community website. I have one problem here how can i show the comment post in the wesite once it is refreshed it is gone though it remains in the database.
    Is there anything i have to do ?

    ReplyDelete
  22. What about security? When doing a comment system like this, you expose the php file that handles the post, and also the variables.

    Everyone who knows php can access that php file directly, and add comments to non-existing blogs.

    Is there a way to prevent this? I'm making a system like this myself, and I need som kind of security.

    ReplyDelete
  23. cool,,
    thank's for the sharing...
    i will try it , ,,

    ReplyDelete
  24. You should be aware that if there is a lot of content in the comment box it looks a mess. The comment crosses over into the text fields.

    Surprised nobody has noticed this. Tried it on the live demo in multiple browsers

    ReplyDelete
  25. Great turtorial. But if we have a lot of comments, how should we do next for the jquery pagination? Thankx

    ReplyDelete
  26. Great explaination

    ReplyDelete
  27. how do you make this comment system to display the time when the comment was posted

    ReplyDelete
  28. hi can this be themed like facebook

    ReplyDelete
  29. Hey, Nice script m8.

    But if adding this to different pages while using the same db and table's will it only display the comments based on the page ID?

    I see the post above and the additional table instructions but have yet to see if anyone actually got it working.

    Any additional info would be greatly appreciated. Thanks :)

    ReplyDelete
  30. You should really make this a more complete script.
    Its got great potential but its missing too many required pieces to be a viable option for anyone other than dev's.

    Make a simple config file for mysql and include it with the download. It should also be built assuming people will be using it on multiple pages thus the post_id should be included by default.

    ReplyDelete
  31. hi can you explain the jQuery.js?


    -oscar

    ReplyDelete
  32. Hi Oscar,

    jQuery is great library for developing ajax based application. jQuery is the JavaScript Framework program, which simplifies the development of web applications. jQuery helps the programmers to keep code simple and concise. The jQuery library is designed to keep the things very simple and reusable.

    Srinivas Tamada

    ReplyDelete
  33. thank you Srinivas Tamada,

    i just have another question how can fix the comment msg it overflows in the div i want it to be align on the div or if you have a final sourcecode can you share it to me im working on my personal page im just testing in at localhost..do you have email?thnx

    ReplyDelete
  34. Comments appear on top

    $("ol#update li:last").fadeIn("slow");

    Change this into

    $("ol#update li:first").fadeIn("slow");

    ReplyDelete
  35. how about captcha integration ?

    ReplyDelete
  36. Srinivas u r too gud yar... was looking fr the same thing



    Preeti

    ReplyDelete
  37. Wow great example i have edit it and it now shows comments has an captcha and posts to a DB also it works on multiple pages remembering wich page it has been posted to !!

    Great work

    ReplyDelete
  38. can i do pagging? in this script

    ReplyDelete
  39. Hi Srinivas,
    Thanks for the script. I tried what you proposed to put one comment on top of the others

    $("ol#update li:first").fadeIn("slow");

    But it doesn't work. I can display the first comment but the others doens't appear. Can you help me?

    ReplyDelete
  40. @ David

    Comments appear on top
    ------------------------

    You have two changes instead of the

    $("ol#update").append(html);
    $("ol#update li:last").fadeIn("slow");

    to

    $("ol#update").prepend(html);
    $("ol#update li:first").fadeIn("slow");

    ReplyDelete
  41. Awesome! It works great. Thanks Srinivas

    ReplyDelete
  42. I can't see anywhere your mysql_close(); statement if you are to create tables in your database. Do you keep it opened and lying like that all the time just for everybody to access?

    ReplyDelete
  43. Hello Srinivas,

    I am lost on how to keep the old comments. What code and WHERE will I put it????

    I am new to PHP and MySQL but very much interested in your work.

    ReplyDelete
  44. Hello Srinivas,

    I am lost on how to keep the old comments posted and how to delete the old comments. What CODE and WHERE will I put it????

    I am new to PHP and MySQL but very much interested in your work.

    Many thanks!

    Arnold

    ReplyDelete
  45. Hi Srinivas,

    All of us appreciated your work! Many thanks and keep it up.

    Can you post here the complete COMMENT SYSTEM you have done.

    Because for newbies like me, I am kinda loss with all additional codes. Like displaying the old comments, where to put the code, etc.

    Again, thank you!

    ReplyDelete
  46. Hey, nice script.. with easy understanding :-)

    thanX
    Manjula

    ReplyDelete
  47. Was wondering; the comments show above the form. How about making it into the reverse and have the comments show below the form. This format might be needed if just a single field is to be filled in. Think of something like Facebook's share form.

    ReplyDelete
  48. hello tutorial how I can incorporate that into my site built with Joomla? which file should I edit, I use as a component joomsocial

    ReplyDelete
  49. Thank you very much. Very usefull. Cheers! :)

    ReplyDelete
  50. nice article, thanks

    ReplyDelete
  51. Nice tutorial, thank you

    ReplyDelete
  52. Tesing .. ajax is awsome

    ReplyDelete
  53. Hi,

    Your code is terrible!! excelent work!

    I just have a question. Is there a way to hide the location of commentajax.php from header? Cause the people can know where is it and try to access it directly.

    Thanks

    ReplyDelete
  54. luvlyyyyyyyyyyyyyyyyyyyyyyy

    ReplyDelete
  55. very nice

    can you make clone of zendesk.com of give information how to make one thanks

    ReplyDelete
  56. HI

    how can i show the comment post in my website once it is refreshed it is gone though it remains in the database.
    Is there anything i have to do ?

    ReplyDelete
  57. @argentinoboy

    Read following link ver 2.0

    http://www.9lessons.info/2009/09/comment-system-database-with-jquery.html

    ReplyDelete
  58. Very good info. Thank you!
    Maybe you can help me, how to make info not in ol tag but in table tag?

    ReplyDelete
  59. Thanks very much !!

    ReplyDelete
  60. this is fine.......

    ReplyDelete
  61. nice topic yar...

    ReplyDelete
  62. I modified the application to work with a database, you can download it here: http://www.getvay.com/pg/file/macs1407/read/1570/comentarios-es-jquery-php-mysql

    ReplyDelete
  63. how do I make an Image a PHP file??

    ReplyDelete
  64. Pretty cool, been wondering how to do this for a while. :P

    ReplyDelete
  65. Nice, thanks for that, just saved me a few hours.

    ReplyDelete
  66. How do I change that avatar?! Please Help

    ReplyDelete
  67. PS: Why are the comments dissappearing when you go in to the page again?

    ReplyDelete
  68. Great script, but when you put a blank space( hit spacebar) in textarea, you can still post a blank comment. How to fix that ? Tnx

    ReplyDelete
  69. Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/a5530317/public_html/coment/comment.php

    what this mean?
    how to fix please

    ReplyDelete
  70. Wow great example i have edit it and it now shows comments has an captcha and posts to a DB also it works on multiple pages remembering wich page it has been posted to !!

    ReplyDelete
  71. is this an example of the system itself?

    ReplyDelete
  72. i love your script, you made me want to learn ajax now :)

    ReplyDelete
  73. Wow, this is awesome!

    I’ve implemented this and it works great. However, I’m having a hard time implementing multiple comment boxes on a single page. The best way to describe what I’m doing is to think of a twitter stream, and the users having the ability to view comments and add comments on each individual tweet. So I added another column to the comments table called item_id which will reference which item this comment belongs too. I’m not sure how to implement this though…..any help is greatly appreciated!!

    ReplyDelete
  74. The comment system is great when used in conjunction with JQuery,Ajax,CSS and PHP

    ReplyDelete
  75. Awesome I'll give it a try, got a complete account/profile settings system ready, people can sign up, log in and out alright. Now I'm going for how the site is gonna work.
    Can't believe people are still using IE, it's such a pain in the ass to make the site compatible, not sure I'll do it anytime soon.
    btw I'm following you on twitter ;)

    ReplyDelete
  76. Excellent. Can't wait to give this a go, thanks.

    ReplyDelete
  77. hi I am going to create admin page for comment system can you help me

    ReplyDelete
  78. hi I am going to create admin page for comment system can you help me

    ReplyDelete
  79. Nice comment system!
    How to implement 4(four) comment boxes on same page in 4 tabs (the comments need to be different)? And how to separate comments on different pages?

    Thx a lot! sorry for my English.

    ReplyDelete
  80. hello guys may someone help me?
    my problem is "Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/a5619214/public_html/com/comment.php Unknown column 'post_id'"
    What ti do? Thank you

    ReplyDelete
  81. This is great! || Thank you for sharing! || :D

    ReplyDelete
  82. This comment has been removed by a blog administrator.

    ReplyDelete
  83. Hi Srinivas,

    How could i make this automatically update ? I can store the values, i can display them, but i would like to refresh the page everytime a new comment is added ( basically a chat function .. ). Any sugestions? Your help is greatly appreciated :) Thanks!

    ReplyDelete
  84. Hello again, i have figured this out on my own. It's not the best solution, but this is my add :
    in commentajax.php , instead of listing the last comment, you put the code to list all comments.

    then, in your comment.php file, you create a function (ex: show_content() ) which contains the $.ajax code, without the data parameters. at the end of this function you add setTimeout("show_content()",2500); (2500 meaning 2.5 secs to refresh). You would need to clear the innerHTML of the update div, and remove the getElementByID('comment')="" statement, and than this can be used as a chat.

    The instructions are short, but i can provide you the files so you can write more detailed instructions :) i'm sure people will be gratefull. My email is freecubex@yahoo.com (maybe you won't make this public,please!). Thanks!!!!
    Alex.

    ReplyDelete
  85. nice. this is helpful

    ReplyDelete
  86. Hello,
    First of all i want to say a BIG thanks to Srinivas Tamada for this great work!

    But am having a small problem, i've developed your script to be comment inside comments!

    And my problem is i want to view the comment only on the current post.

    $("ol#update"+ReplyID).append(html);

    Its not working, can you please help?!

    Thanks!

    ReplyDelete
  87. OMG, this is nice.

    I will implement this in my own website if I have some spare time.

    Thanks.

    ReplyDelete
  88. How to implement this comment system with php smarty template pages?

    Please advice?

    ReplyDelete
  89. And now how can i add spam filteer to this commenting system.

    ReplyDelete
  90. And How to do with a "select" instead of "input"

    ReplyDelete
  91. uh

    why dont you use these scripts on your site if they're so great?

    ReplyDelete
  92. Muito bom! Very good!

    ReplyDelete
  93. does this site supports it?

    ReplyDelete
  94. nice !!
    but, i'm facing problem.. when i use newline in comment.. it crossed to next comment part.
    How can i resolve it..help me !!

    ReplyDelete
  95. Thank you for this, works great :)

    ReplyDelete
  96. thanks fo the information....

    ReplyDelete
  97. nice pretty cool but need to finish

    ReplyDelete
  98. Nice comment box script. I might have to work on one myself.

    ReplyDelete
  99. I have added this code to my streamline, however after it posts the comment, I cannot get the text area to clear. Any thoughts?

    ReplyDelete
  100. you chose to make a click event on the submit button, it would be more intereting to use an onsubmit event listener...

    ReplyDelete
  101. Firts of all thanks for the script im new to js and jquery so as ajax, is very simple and understandable. I have a site with several posts on a single page, i want to add comments to every single one of them, how can i tell the script which form is been submited?

    Thanks!

    ReplyDelete
  102. Thank you for this script. But I have one question - how can I add more fields. I make everything to works fine but I can not make show post_id. I try to add input hidden field with post_id and after that i try to access it with $_POST[post_id] but... it's not working. I try to add one row it in the JavaScript:

    var post_id = $("#post_id").val();
    var name = $("#name").val();
    var email = $("#email").val();

    But it still not working :) Any suggestions?

    ReplyDelete
  103. Pls can someone upload the working code and maybe post a link? is that possible here?. I really like this script, but it must be full of typo's or bugs judging by what people have commented on. Its an excellent looking comments system.

    Kev

    ReplyDelete
  104. how do i retain the comments while the page refreshes?...please any good assistance will be appreciated..thanks *

    ###You can add more fields###
    Just change the Id element name to your desired..and feel happy
    ################################

    $(function() {
    $(".submit").click(function()
    {
    var name = $("#name").val();
    var email = $("#email").val();
    var comment = $("#comment").val();
    var Id = $("#actID").val();
    var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment + '&actID=' + Id;
    if(name=='' || email=='' || comment=='')
    {
    alert('Please Give Valid Details');
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('(insert your loading image here)Loading Comment...');
    $.ajax({
    type: "POST",
    url: "commentajax.php",
    data: dataString,
    cache: false,
    success: function(html){
    $("ol#update").append(html);
    $("ol#update li:last").fadeIn("slow");
    $("#flash").hide();
    }
    });
    }return false;
    }); });

    ReplyDelete
  105. is this script working with mobile web browsers?

    ReplyDelete
  106. this script is good but has one major problem which i think most people would prefer to have, and that is to have the comments stream always display, and not just display when a comment is sent

    ReplyDelete
  107. does this comment goes directly or goes for approval first?

    ReplyDelete
  108. Nice sript, thanks man ! Just be good to add some function for paginatin comments - if we have moor comment about this article ?
    But, again, thanks man !

    ReplyDelete
  109. i'm trying this. thank you

    ReplyDelete
  110. I want only 10 comments once on a page than there shuld start a second and third page like youtube 1,2,3,4... . plz help me. Thanx

    ReplyDelete
  111. pretty nice comments box!

    ReplyDelete