9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, May 18, 2009

Facebook like multi Toggle Comment Box with jQuery and PHP.

Implement Facebook like toggle comment box for every updated wall. I had designed a simple example it contains of very simple jQuery and PHP code.

Part 2: Submit multiple comment forms with jQuery and Ajax.

Facebook like multi Toggle Comment Box with  jQuery and PHP.

Download Script     Live Demo

javascript code
Take a look at "#slidepanel"+I . Here 'I' element comment_button ID value 'msg_id'
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
">
</script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".comment_button").click(function(){

var element = $(this);
var I = element.attr("id");

$("#slidepanel"+I).slideToggle(300);
$(this).toggleClass("active");

return false;
});
});
</script>



PHP and HTML Code
Toggle div id value slidepanel+msg_id and div class panel style='display:none'
<ol id="update" class="timeline">
<?php
include('db.php');
$sql = mysql_query("SELECT msg,msg_id FROM messages");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$msg_id=$row['msg_id'];
?>
<li>
<div align="left">
<h1><?php echo $msg; ?></h1>
<a href="#" class="comment_button" id="<?php echo $msg_id; ?>">Comment</a>
</div>
</li>
<div class='panel' id="slidepanel<?php echo $msg_id; ?>">
<form action="" method="post">
<textarea style="width:390px;height:23px"></textarea><br />
<input type="submit" value=" Comment " class="comment_submit" />
</form>
</div>
<?php } ?>
</ol>

CSS code
*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:1.2em;
}
ol.timeline li{
position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
height:45px}
ol.timeline li:first-child{
border-top:1px dashed #000;}
.panel
{
diplay:none
}

Useful Link : Submit Comment through AJAX
Comments
{ 90 comments }
Salih GEDIK said...

Nice Work :)

Anonymous said...

Wouldn't you want to do this since you've already created a variable for $(this) ?

element.toggleClass("active");

Anonymous said...

perfect

adambrunner said...

You have a div inside an ol, but outside the li elements? Why you not put that slidepanel div into the li, change from id to simple class 'slidepanel', and than use the following js for it:

$(this).find('div.slidepanel').slideToggle(300).end().toggleClass('active');

scvinodkumar said...

If you add focus to textarea when the comment button click similarly, if the textarea lost focus,we can hide it.

Medovarszki Mihaly said...

Nice post! I'll implement it for my new project.
AJAX is really powerful behind web 2.0 applications.

ZK@Web Marketing Blog said...

To use the jQuery functions in our HTML document, we have to download the latest jQuery library from the jQuery download page and include the library in the document with a script tag like the following in the head of the page.

RG said...

great.. :)

Anonymous said...

At the first to 3rd line is posted a javascript linking to ajax...

Can you help me to show what his script contains to me?

Anonymous said...

this line is showing warning :mysql_fetch_array(): supplied argument is not a valid MySQL result resource

The line is: while($row = mysql_fetch_array($sql))
can u help me out

Srinivas Tamada said...

Check the SQL statement..

Anonymous said...

buk how to insert new comment? do you have that script? thanks

Srinivas Tamada said...

take a look at this link for inserting comment

Comment system with jQuery, Ajax and PHP.

Sweetksa said...

this is wonderful tutorial .. i read it 3 times and get a fantastic results and sure i put a
copy of this lesson on my site here

www.sweetksa.com

Anonymous said...

Thanks, this is helpful!

Anonymous said...

Hello,

Could you please give me mootool version for this effect?

Thanks!

Anonymous said...

hi

puneet said...

does the page refresh on posting the result ???
if it does, then its not quite like that. if it doesn't, wonderful...

Srinivas Tamada said...

@Puneet

Demo page no database connection

kaizar said...

is there any other way that we can implement this to blogspot template? i'm currently looking for a way to put it as a gadget on my homepage so that every comment will be updated to my page

Srinivas Tamada said...

@Kalzar

I'm experimenting on this issue

kaizar said...

thanks srinivas. be looking forward to it. currently i use facebook template for my blog here: http://adammale.blogspot.com, so i'm looking forward to add a comment box like facebook to the home page. thanks again!

Srinivas Tamada said...

@Kalzar

Impressive blogger template idea http://adammale.blogspot.com

Anonymous said...

Well done

Anonymous said...

i like this

Anonymous said...

Actually, i dont see point of toggling style .active when its nowhere defined? Im not jQuery expert, actually im newb, just doesnt make much sense to me.
And great example, this is something i can adopt and use except .active will be defined as overflow:hidden/auto...
Thanks

Anonymous said...

Thx.. really useful.. i like this..

Enis said...

xxx

Anonymous said...

rrr

Anonymous said...

still finding the way to solve this problem>>
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\AppServ\www\ajax-form\multiple_query\multi_toggle.php on line 90

FYI
line 90>>
while($row=mysql_fetch_array($sql)) {

Anonymous said...

it is nice. it displayed the rows but may i ask why the comment input when clicked does not append to the database? can any of you help with this, like a mysql table plus some additional details? thanks people.

Anonymous said...

Any chance of getting such a thing with asp.net?

Anonymous said...

$this is can hav same result try to keep it as $toggle

Anonymous said...

not so great, the page reloads. its not ajax.

Anonymous said...

cool

Anonymous said...

hi,
i have a problem, in firefox works perfect but in safari the textarea is not displayed.

any suggestion?

thanks

Anonymous said...

cool

Anonymous said...

Well now I trying the code I hope work, because I have many problems. now check ..

my regards

to the Team.

kraloyun said...

Hello,

Could you please give me mootool version for this effect?

Thanks!

Anonymous said...

Thanks!

samad said...

good !

Mick said...

Thanks a lot

Den said...

Nice one.Will try to tweak it and add to WP comment box...

AlexisBlaze said...

hmm.. i think this will slow down page load big time.. a better solution would be to have 1 hidden comment form, and clone it when "comment" link is clicked, then slide it..

Anonymous said...

nice

Viagra said...

This was useful but it still makes me wonder how many other ways there are to multi toggle a comment not only on facebook but other sites as well.

Shawn said...

Thanks

Anonymous said...

nice post

Anonymous said...

thanks

Anonymous said...

nice one

austria casino said...

Thanks for the wonderful site. Having the good article.

torrent download said...

Pretty cool.. Thanks a lot..

Guna B.Sc(Che)., MCA said...

how to toggle(close)the text box after success...

torrent download said...

Well now I trying the code I hope work, because I have many problems. now check

Anonymous said...

Nice work dude

Anonymous said...

Great

Anonymous said...

Worth a try...

Anonymous said...

good work

Stephanie said...

I found this is an informative and interesting post so i think it is very useful and knowledgeable.

Facebook Likes said...

wonderful blog.. i have gone through times and get a fantastic results and sure i put a
copy of this lesson on my site here

nco fin 22 said...

It's great to see a blog of this quality. I learned a lot of new things and I'm looking forward to see more like this. Thank you.

voyant said...

really useful.. i like this..

account charged off said...

Your post is really good worth of reading and useful to everyone.

Douglas Kramer said...

When a jQuery object is passed to the $() function, a clone of the object is created.

Smokestik said...

SmokeStik electronic cigarette functions on the similar lines of other electronic cigarettes, but has an exclusive and a new technology in its products.

forex vps said...

I really like this Easter basket, it is one of the best tradition that we can give to all and teach in order not to lose it at all.

submit url said...

These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post.

credit boards said...

It is a very informative and useful post thanks it is good material to read this post increases my knowledge

Annapolis Condos For Sale said...

Your post is really good worth of reading and useful to everyone.

hdd regenerator review said...

Very informative and useful post thanks it is good material to read this post increases my knowledge

free online dating said...

The post is very nicely written and it contains many useful facts. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement. Thanks for sharing with us.

Web Tasarım Özel Ders said...

Nice post ,Thanks for sharing :)

Pets Paradise said...

Love to see it.. I read your post.. It's very informative for my business..
If you are more updates about this fabulous article.. Please inform me And share me, Thanks
for share this fabulous post.. Thanks.!!!

Anonymous said...

good

Anonymous said...

thanks

Process of grief said...

I like your blog design and written style. Thanks for sharing these information.

Process of grief said...

I like your blog design and written style. Thanks for sharing these information.

Manish Gubhaju said...

Cool Blog. Keep up the good work Srinivas.

Manish said...

Nice

bacterial vaginosis said...

Thanks for this great article! It has been very insightful.
I have seen a lot of blogs but i really like the layout of yours I wish that you will continue posting your knowledge
with us.
thanks...

Yesh said...

Nice Work!

Adrian said...

Very, very nice sampling of Blogger themes. Many are sleeping on SEO-friendly BlogSpot / Blogger websites simply because designers prefer WordPress and therefore offer better themes but these are just as good and some are even better. Thanks!

Anonymous said...

demo doesnt work... when you press submit the content doesnt show.

jucarii erotice said...

I really enjoy simply reading all of your weblogs.
Simply wanted to inform you that you have people like me who appreciate your work.

buy outdoor furniture said...

Excellent article! It is obvious that you did a lot of trouble to research and write this article.

Anonymous said...

good

Deepak Kumar said...

nice

audience response technology said...

Awesome site! I am loving it!! Will come back again. I am bookmarking your feeds also. Very informative post. Looking more to something like this

chota bheem games said...

I added some mini chocolate chips & they paired nicely with the cinnamon sugar. The top was crunchy too from the coating, which was nice.

Article Writing said...

I like the framework for this article. This one is goes to a suitable data for me and i trust different people who are looking for after down this sort of stuff will take social events of shocking data in this post. Grateful concerning offering such solid subject here on the web.

Post a Comment