Facebook like multi Toggle Comment Box with jQuery and PHP.
Wall Script
Wall Script
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
web notification

101 comments:

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

    element.toggleClass("active");

    ReplyDelete
  2. 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');

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

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

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

    ReplyDelete
  6. 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?

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

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

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

    ReplyDelete
  10. Thanks, this is helpful!

    ReplyDelete
  11. Hello,

    Could you please give me mootool version for this effect?

    Thanks!

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

    ReplyDelete
  13. @Puneet

    Demo page no database connection

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

    ReplyDelete
  15. @Kalzar

    I'm experimenting on this issue

    ReplyDelete
  16. 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!

    ReplyDelete
  17. @Kalzar

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

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

    ReplyDelete
  19. Thx.. really useful.. i like this..

    ReplyDelete
  20. 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)) {

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

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

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

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

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

    any suggestion?

    thanks

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

    my regards

    to the Team.

    ReplyDelete
  27. Hello,

    Could you please give me mootool version for this effect?

    Thanks!

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

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

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

    ReplyDelete
  31. Thanks for the wonderful site. Having the good article.

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

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

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

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

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

    ReplyDelete
  37. really useful.. i like this..

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

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

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

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

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

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

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

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

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

    ReplyDelete
  47. 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.!!!

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

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

    ReplyDelete
  50. Cool Blog. Keep up the good work Srinivas.

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

    ReplyDelete
  52. 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!

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

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

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

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

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

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

    ReplyDelete
  59. Great script it looking Awesome. Thank You Guys...

    ReplyDelete
  60. Good one but can you detail how to insert the value of the comment to database

    ReplyDelete
  61. sir please make a tutorial php,mysql,javasript ,xml responce.like facebook time auto change or comment auto load.

    ReplyDelete
  62. Can you help to make it work for my wordpress site...

    ReplyDelete
  63. I have some what different requiremens so will be looking for your reply to code something for it.

    ReplyDelete
  64. Nice and informative article. This article helps me. Keep doing this.

    ReplyDelete

mailxengine Youtueb channel
Make in India