Loading Searchbox
9lessons programming blog logo
Friday, June 12, 2009

Comment system with jQuery, Ajax and PHP.

99 comments
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

Sponsored Links

Recent Posts

Share this post

Subscribe to my feeds

Subscribe
Comments
99 comments
bitlimakina said...

best practice, thank you

Vasil Dakov said...

Cool! Thank you!

Anonymous said...

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.

Anonymous said...

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..

Anonymous said...

Yes where to store the comments :)

Srinivas Tamada said...

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') ") ;

Anonymous said...

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 :)

Swayne said...

exactly what i was looking for, thanks

Anonymous said...

nmn

laura said...

nice script but how to keep the comments visible ??

karlamarie bei said...

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...

Anonymous said...

Looks perfect, thanks.

Anonymous said...

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') ") ; "

Srinivas Tamada said...

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

Anonymous said...

$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

Anonymous said...

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

DsurioN said...

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.

Anonymous said...

::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. :/

Srinivas Tamada said...

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
}
?>
------------------------------------

Anonymous said...

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.

Anonymous said...

Thanks for keeping it simple. Just what I needed.

JIm

Anonymous said...

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 :)

Anonymous said...

try it

Anonymous said...

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?

Anonymous said...

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 ?

Anonymous said...

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.

sam' said...

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

Anonymous said...

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

Anonymous said...

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

Anonymous said...

Great explaination

Anonymous said...

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

Anonymous said...

hi can this be themed like facebook

Anonymous said...

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 :)

Anonymous said...

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.

oscar said...

hi can you explain the jQuery.js?


-oscar

Srinivas Tamada said...

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

oscar said...

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

Srinivas Tamada said...

Comments appear on top

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

Change this into

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

Anonymous said...

how about captcha integration ?

Preeti said...

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



Preeti

webdesign said...

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

Anonymous said...

EFWGWERGRG

D3shi said...

Nice!

Anonymous said...

can i do pagging? in this script

David said...

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?

Anonymous said...

thanks ya..

Srinivas Tamada said...

@ 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");

David said...

Awesome! It works great. Thanks Srinivas

sreenivas said...

Great Work

Anonymous said...

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?

Anonymous said...

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.

Anonymous said...

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

Anonymous said...

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!

Srinivas Tamada said...

Updated This Post Link

Comment System with jQuery, Ajax, PHP and MySQL (Version 2.0)

Anonymous said...

Great Work

Anonymous said...

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

thanX
Manjula

Maximiliano said...

thank you! very good!

Femi Olarinoye said...

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.

Anonymous said...

good job

Munir said...

Thanks very nice

Anonymous said...

NICE!!!!!!

Anonymous said...

Cool!

حازم البدري said...

Thank you

Anonymous said...

nice

emildag said...

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

Anonymous said...

nice!!
thank you

chee kok ti said...

haha

Darwin said...

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

Anonymous said...

nice article, thanks

My blog said...

thanks!

Anonymous said...

Nice tutorial, thank you

Anonymous said...

Great@@

Anonymous said...

cool

Anonymous said...

Tesing .. ajax is awsome

Sam said...

very nice

Rob said...

This is cool

Rob said...

Hello world!

manix said...

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

Justin said...

Real nice tutorial

craig said...

Awesome

Anonymous said...

luvlyyyyyyyyyyyyyyyyyyyyyyy

Prik thai said...

Thank you so mutch!

nunoz said...

very nice

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

argentinoboy said...

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 ?

Srinivas Tamada said...

@argentinoboy

Read following link ver 2.0

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

Anonymous said...

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

Anonymous said...

Thanks very much !!

Anonymous said...

Interesting

Anonymous said...

this is fine.......

Anonymous said...

nice topic yar...

Anonymous said...

thank you

Anonymous said...

thx bro

Anonymous said...

Tanks

Anonymous said...

its nice one

Anonymous said...

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

Anonymous said...

THANKS

Hector said...

how do I make an Image a PHP file??

blogregator said...

Great post! Thank you!

kupa said...

lol, crashes in firefox

Post a Comment

Orkut | FacebookAbout Me

Subscribe now!Feeds RSS

Subscribe now!Recent Posts

Subscribe now!Categories

Subscribe now!Comments

People Says

@9lessons thank you for the great tutorials, we truly appreciate your contributions to the design community.

Smashing Magazine

Join into my community

Labs ProfileRelease

My ProfileTwitter