In this article, we’re going to look at how we create a simple but effective means of capturing and displaying visitor comments using a blend of jQuery, PHP and JSON. In the public forum that is the blogosphere, the ability to capture and display visitor comments on your blogs can give you instant feedback and opinions from the people that matter most – those that read your blog.
Outline
We’ve several tasks that need to be accomplished in order to complete this example; when the page on which the comments are displayed is initially loaded, we need to display all of the existing comments. Additionally, when a new comment is made, we’ll need to display this on the page after the existing comments, as well as sending the new comment to the server for storage with the existing comments.
Tools Required
We’ll be using jQuery (version 1.3.1), obviously, because it rocks, and we’ll be using JSON because it’s a light-weight and efficient format for transporting data across networks. We’ll also be using a little simple PHP to interact with a MySQL database. You’ll need to have access to an installation of MySQL server and should prepare a new database called comments that contains a table, also called comments, which has a name column and a comment column. Running a select all query to your database should produce a result similar to that shown below:
Getting Started – The Stored Comments
Let’s make a start by creating the PHP file that reads the comments from the database and returns them to the page; this way, when we come to code the page, the data will already be available for us to use. In a new file in your text editor add the following code:
<?php
//db connection detils
$host = "localhost";
$user = "root";
$password = "your_password_here";
$database = "comments";
//make connection
$server = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $server);
//query the database
$query = mysql_query("SELECT * FROM comments");
//loop through and return results
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row = mysql_fetch_assoc($query);
$comments[$x] = array("name" => $row["name"], "comment" => $row["comment"]);
}
//echo JSON to page
$response = $_GET["jsoncallback"] . "(" . json_encode($comments) . ")";
echo $response;
?>
Save this as comments.php. Let’s briefly walk through what we do with this code. We store the access credentials for our server in the first four variables and following this, we connect to the database. We then query the database and select all of the data from it.
For Loop
In the next section of code we use a for loop to cycle through each row of data. On each iteration of the loop we add a new item to an array ($comments). The array is a multidimensional associate array and each item will have two sub items which are given the keys name and comment, matching the columns in our table. The value of each item will be the data from each respective field in the current row.
JSON Encode
Finally we package up the completed JSON object in a GET request and then use the native PHP json_encode function to convert our array into a properly formatted JSON object. We’ll be using a JSONP callback in the JavaScript, which is why we need to use a get response and also why we wrap the JSON encoded array in brackets. To clarify the structure of the data that we’re returning, if we were writing it out manually we would do something like this:
([
{name:"a name", comment:"a comment"},
{name:"a name", comment:"a comment"},
{ etc }
])
This consists of a simple array, where each item in the array is an object. These inner objects each have two properties – author and comment, where the values of these properties are the data extracted from the text file. Nesting the inner objects in an array makes it extremely easy for us process the data with jQuery. The following screenshot shows how the JSON object will be interpreted by Firebug:
Displaying the Stored Comments
Now that we have an object to work with, we can create the HTML page that will display the comments. In a new file in your text editor add the following mark-up:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="comments.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Asynchronous Comments</title>
</head>
<body>
<div id="content">
<h2>Some Content</h2>
<p>Lorem ipsum dolor...</p>
</div>
<div id="comments">
<h2>Reader Comments</h2>
</div>
<div id="leaveComment">
<h2>Leave a Comment</h2>
<div class="row"><label>Your Name:</label><input type="text"></div>
<div class="row"><label>Comment:</label><textarea cols="10" rows="5"></textarea></div>
<button id="add">Add</button>
</div>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
</body>
</html>
Save this file as comments.html. Most of the mark-up is non-essential and is used to give the example some substance. On the page we have some dummy content, a container which the existing comments can be rendered into and some basic form elements used to leave a new comment. In the head of the page we link to a stylesheet and at the end of the body we link to the jQuery library.
CSS
The stylesheet used in this example is non-essential and is used simply to present the example neatly. It consists of the following CSS:
body { font-family:verdana; font-size:11px; color:#ffffff; }
#content {
width:400px; height:195px; border:3px solid #000000; margin:0 auto 10px;
font-size:13px; background-color:#575454;
}
#content p { padding:0 10px; }
#comments {
width:400px; border:3px solid #000000; margin:0 auto 10px;
padding-top:5px; background-color:#575454;
}
.comment {
background-color:#d4d7d6; border:1px solid #000000;
padding:5px 0 5px 5px; color:#000000;
}
#leaveComment {
width:400px; border:3px solid #000000; margin:0 auto;
overflow:hidden; position:relative; background-color:#575454;
}
h2 { text-align:center; margin:5px 0 10px; }
.row { padding-left:5px; margin-bottom:5px; clear:both; overflow:hidden; }
.row label {
width:100px; text-align:right; margin-right:5px; display:block;
float:left; font-weight:bold; padding-top:5px;
}
.row input, .row textarea, .row div {
width:280px; display:block; float:left;
}
#add {
position:absolute; bottom:5px; left:60px; font-weight:bold;
font-size:10px;
}
Save this as comments.css in the same directory as the HTML page. I won’t cover exactly what this code does as it’s pretty trivial and is used purely for display purposes. It should cause the page to be displayed as follows:
Javascript
Now we can add the JavaScript that will request the JSON object from the server, process it and display the comments. Directly after the link to jQuery add the following script block:
<script type="text/javascript">
$(function() {
//retrieve comments to display on page
$.getJSON("comments.php?jsoncallback=?", function(data) {
//loop through all items in the JSON array
for (var x = 0; x < data.length; x++) {
//create a container for each comment
var div = $("<div>").addClass("row").appendTo("#comments");
//add author name and comment to container
$("<label>").text(data[x].name).appendTo(div);
$("<div>").addClass("comment").text(data[x].comment).appendTo(div);
}
});
});
</script>
Again this code is fairly trivial; when the page has loaded, we use the getJSON method to request the JSON object from the PHP file, specifying the path to the file as the first argument. We add the JSONP callback - ?jsoncallback=? - to the end of the URL and then specify an anonymous callback function as the second argument, which will be executed if and when the request returns successfully.
Within our callback we have a simple for loop which is used to loop through each item in the JSON array. For each item we create a container div which is given a class of row and is then appended to the main comments container div.
We then specify a label and set the text of the label to the value of the name property of the object in the current array item. After the label has been appended to the current container div, we create another div which is used to hold the value of the comment property. The comment is then appended to the current container div.
Now when we run the page, we should find that the comments from the database are displayed within the specified container div:
Adding New Comments Asynchronously
For the final part of this tutorial we can see how easy it is to automatically insert a new comment after the existing comments, while at the same time sending the new comment to the server to be added to the database so that it can be displayed automatically when the page is next loaded. Add the following new code directly after the getJSON method:
//add click handler for button
$("#add").click(function() {
//define ajax config object
var ajaxOpts = {
type: "post",
url: "addComment.php",
data: "&author=" + $("#leaveComment").find("input").val() + "&comment=" + $("#leaveComment").find("textarea").val(),
success: function(data) {
//create a container for the new comment
var div = $("<div>").addClass("row").appendTo("#comments");
//add author name and comment to container
$("<label>").text($("#leaveComment").find("input").val()).appendTo(div);
$("<div>").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div);
}
};
$.ajax(ajaxOpts);
});
Again, this is very straight-forward code – what we’re doing is quite complex, but jQuery abstracts away all the difficulty and cross-browser trickiness, leaving us to write just a few lines of code. We first set a click handler for the add comment button. This will execute the anonymous function specified as an argument to the click method whenever the button is clicked.
Within this function we first create a new literal object which is used to configure the new AJAX request. We specify the type of request, the URL of the resource we’re requesting, some data and a success callback function. Within our success function all we do is get the contents of the input and textarea and add them to the comments div in the same way that we did with the original comment data received when the page loads.
Database Connection
We’ll need one more PHP file in order to write the new comment to the database:
<?php
//db connection detils
$host = "localhost";
$user = "root";
$password = "your_password_here";
$database = "comments";
//make connection
$server = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $server);
//get POST data
$name = mysql_real_escape_string($_POST["author"]);
$comment = mysql_real_escape_string($_POST["comment"]);
//add new comment to database
mysql_query("INSERT INTO comments VALUES(' $name ',' $comment ')");
?>
Save this file as addComment.php. We specify our connection information once more and connect to the database. We then get the data sent by our JavaScript from the $_POST superglobal variables and then use the mysql_query function to insert the new data into the table. Notice that we use the mysql_real_escape_string function to prevent any misuse of our database; although it’s unlikely that any harm could come from an attacker gaining access to this particular database, it’s always wise to sanitize any data before it is added.
Now we should find that when we add a comment, the new comment is displayed on the page, and subsequent reloads of the page will show the new comment:
Summary
Asynchronous comments are made easy with a combination of jQuery, simple scripts and the lightweight and highly effective JSON format. Although this is just a basic example, to which we could do so much more, I think you’ll agree when I say that it’s easy to implement a basic, but robust solution to the capture and display of comments from your visitors.
To learn more from Dan Wellman, be sure to sign up for our Net Plus program, where you can read, among others, his in depth tutorial/screencast "Build an Advanced "Poll" jQuery Plugin". Sign up now!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )konsehal_14 February 23rd
Wow, this is what I’ve been waiting for
( )but the Demo is *
Snorri - Css February 23rd
nice 1 but the demo is not working
( )Jeffrey Way February 23rd
@konsehal – You’re so quick! Try it again.
( )insic February 23rd
really nice.
( )Mark February 23rd
Thanks! I will be using this logic on my site.
( )Jay El Ehm February 23rd
But this is never a good idea:
$user = “root”;
( )Leko February 23rd
in your css have a double tag code: line bottombottom:5px;
very good tuto .. good to pratice.
bye
( )Steve February 23rd
Very nice, i’m deffo gonna use this.
( )M.A.Yoosuf February 23rd
great, but i was thinking of posting similar article in by blog
, any way now i have to add a traceback for this
( )AzeriFire February 23rd
Maybe to add
if(isset($_POST["comment"]) && $_POST["comment"]!=”" && isset($_POST["name"]) && $_POST["name"]!=”")
( ){
exit(); // OR $error=”Fill the required fileds”;
}
to prevent blank comments.
Paul Davis February 23rd
Very useful. =]
Source link is broken though. =/
( )pallu February 23rd
Too good this one, I was searching for something like this all yesterday and nettuts comes up with it the morning after!
Sometimes I suspect you’re spying me, guys
Great job, keep on rolling!
( )Merxhan February 23rd
Great Tutorial, Thank you.
But can someone show how to do this, without JSON, is there another method of doing this, and how?
Thank you
( )Dan JOrdan February 23rd
Aswell as the prevention for blank comments you should clear the input boxes. Add a captcha too.
( )insic February 23rd
@Jay El Ehm of course you need to set your own unique database username when you do it in real applications implementation.
( )Randy February 23rd
The demo kind of scares me to implement this. I do find much of the info helpful. Thanks!
( )Brenelz February 23rd
Excellent once again Dan! I have seen Dan’s Tuts+ Tutorial and would recommend NET.TUTS+ to anyone!
( )Benjamin Reid February 23rd
Nice but I get “FAIL FAIL FAIL FAIL…” in the demo.
And boo to the new default icons.
( )dd June 13th
this is goood
( )Sirwan February 23rd
im using IE, and this comment form jammed my pc…
( )Emil February 23rd
Perhaps you should empty the comments database on the demo… It takes ages to load
( )techietim February 23rd
Several security and anti-spam features need to be added before you should add this to your site.
Other then that, interesting concept.
( )Alex February 23rd
I can’t download source code (I keep getting some gibberish garbage error starting with “AccessDenied”). Please fix it!
Thanks a lot!
( )headlesslizard February 23rd
You are using javascript to display the comments as well as post them? Could someone please explain how this is superior to simply PHP? When I accessed the demo, because of the sheer number of comments, the page became unresponsive. I do not know whether or not this would differ if simply using PHP. It just seems that if this was to be used in a site with heavy traffic it could pose problems. Despite that, it’s a cool feature. Would make a great addition, I’m just slightly skeptical.
( )etrnly February 23rd
Great tutorial, really appreciate it!
Source link is broken though.
( )poc February 23rd
Please clean up a demo site. It’s hardly readable.
( )Chris February 23rd
Awesome article, needed this exactly one week ago. If I had this I wouldn’t have messed up with jQuery code echoed by PHP.
( )Blake February 23rd
You might want to limit the query for the demo, I clicked on it and it lagged my pc for like 15 mins then it displayed like 1000 comments.
Just a thought other than that, nice tutorial.
( )w1sh February 23rd
I wouldn’t want to be on fire and have to wait for that Demo to load before I got water.
( )Dan Wellman February 23rd
Wow, thanks for all the comments everyone (here and at the demo page) and apologies for the poor performance of the demo page (I’ll clear out all the empty comments asap)
Thanks for the suggestions for improvement, and thanks for reading
@w1sh: lol
( )Riko February 23rd
It is indeed a good concept for web 2.0 trend website… But the idea needs to be enhanced, probably with pagination to avoid jam in loading the comments
( )pallu February 23rd
IMO this is not at all unobtrusive, if I disable javascript nothing works!
How to make it become unobtrusive?
( )Jay February 23rd
Great Demo Dan,
You may want to consider appending the comment before the AJAX call. In an application where knowing the data was received is critical (like a bank transaction) then waiting for success is important…
However, for something like a comment you’ll get a more responsive feel if the AJAX happens after the UI feedback. But of course then you’ll want to make sure the user doesn’t navigate away from the page before the call completes, so there’s certainly tradeoffs!
twitter: wjhuie
( )Ian February 23rd
There really should be some added code to prevent users from entering completely empty messages.
( )Blake February 23rd
WOW this tutorial hasn’t been up long and they ran up his bandwidth already!
Kids these days.
( )Rik Girbes February 23rd
Ian: if you look at what ‘AzeriFire’ wrote, thats your anwser.
BTW: nice tut!
Rik
( )Dan Wellman February 23rd
Hi,
Yup, I should’ve checked for empty fields, but I didn’t because it wasn’t entirely related to the context of the example (other than in a basic ‘things you should always do’ kind of way) although of course, you would always do this in any implementation of this kind.
I’ve cleared out the empty comments from the example page so it was loading much quicker
But now my bandwidth has been exceeded so this is why the page is currently down. I’m sorry about this. I’m talking to my hosting company now to try and resolve it. It seems I completely underestimated the interest the page would generate.
I did appreciate all of your comments on the test page though, very interesting reading, some were very funny
( )Joe Mama February 23rd
Beyond the scope of this article…Wonder what you can do to prevent direct access to comments.php. Really hate the concept of issuing any updates/destroy methods in ajax or any other application, especially if it’s as wide-open as in this example. changing from gets to posts just delays the inevitable. I can’t think of anything but generating a session token and then checking for it’s existence & validity etc…Any ideas?
( )AzeriFire February 23rd
@users_who_want_to_use_it
If you want more complete system, there are must be (minimum) :
1) Stopper empty fields
2) And anti flood , maybe with $_SESSION['last_com_add_time']
Dan wrote this tutorial to show just process and mechanism of AJAX comment system (IMHO)
( )AzeriFire February 23rd
Also you can add
$(”#add”).attr(”disabled”, “true”);
after this line
//add click handler for button
$(”#add”).click(function() {
And add
$(”#add”).removeAttr(’disabled’);
after
$(”").addClass(”comment”).text($(”#leaveComment”).find(”textarea”).val()).appendTo(div);
This will disable ADD button until comment will be added completly and prevent stopless pressing button by user
( )P.S. Sorry for my poor English
Bhavin March 3rd
hi,
( )the doe which u have given i am not able to trace it can u explain more what to exactly where….
AzeriFire March 13th
Sorry, for later response. Plz email to me,if still you need more information. ( azerifire [@] gmail.com )
nutral February 23rd
Funny, first you use Firefox, then Safari, then IE and then Chrome. Was that on purpose ?
( )Chris Gedrim February 23rd
Nice tutorial, but two things:
1) Out of curiosity; why didn’t you use mysqli?
2) Shouldn’t you be adding some form of redundancy into your page to cater for those who browse with JavaScript disabled? I would have (off the top of my head) done something like this for the comments section:
Reader Comments
then tweaked the comments.php file thus:
//loop through and return results
if (isset($_GET['jsoncallback']) && $_GET['jsoncallback'] != “”) {
for ($x = 0, $numrows = mysql_num_rows($query); $x $row["name"], “comment” => $row["comment"]);
} else {
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row = mysql_fetch_assoc($query);
echo ‘
‘.$row["name"].’
‘.$row["comment"].’
‘;
}
Just my 2 cents though!
( )Chris Gedrim February 23rd
^ There should have been tags in there, doom!
( )Fred February 23rd
Nice Tut, just wondering is the nettuts.com using AJAX comment or not? LOL
( )Vahid February 23rd
Perfect !!
( )But I think you should prevent direct execution of addComment.php file.
Klaus February 23rd
Cool…
( )Kieran Innes February 23rd
Great tutorial, I learned a lot, thanks.
- Kieran
( )Abhisek February 23rd
Very nice. Thanks.
( )abhijit February 23rd
Nice. But is not this prety basic? It looks nice and works nice.
( )visual February 24th
I could not understand why you are using the find method like –
$(”").text($(”#leaveComment”).find(”input”).val()).appendTo(div).
Is it not better if we directly referred to the input or textarea by giving them ids. Because if we want to add say another field like email, we can no more use find() in this way.
( )Dan Wellman February 24th
Hi,
This article is meant to show the machanics of making the AJAX requests and processing the results. Security should be paramount in any public facing application of course, although as this wasn’t the main focus of the tutorial it was only touched upon lightly. However, while I wouldn’t claim the code was bullet-proof, you can see from the comments on the demo page that people have tried various script and XSS insertions, all of which certainly appear to have failed and don’t cause any issues on page load.
Adding the comment to the page before making the AJAX request is a very good suggestion, however, there may be occasions when for some reason the AJAX request fails. In this situation the visitor may think their comment has been saved as it has appeared on the page, when in fact it may not have been saved. Could be misleading.
The comment page has been completely spammed and there are hundreds of comments. This is to be expected in a comment example page. However, if the page was about something else entirely would there have been that many comments? I doubt it.
We could do everything using PHP, sure. But there would inevitably be a page reload somewhere along the line. Also, we use JSON and JSONP in this example, so, without having PHP installed and configured on your own computer, you can still run the example page and load the comments from my domain. Asynchronously. Without xdomain exclusion. While you wouldn’t need to do this in this type of comments system, it is nevertheless an interesting and valuable technique which isn’t possible using PHP alone.
It isn’t unobtrusive, but again, as with the security aspect, this wasn’t central to the discussion at hand.
@Merxhan: the same thing (although without the JSONP callback) is possible with other data exchange formats such as XML. Although I vastly prefer working with JSON than XML this is just my own opinion.
Thanks again for reading and for everyone’s comments and suggestions, they are all very much appreciated
( )Timothy February 24th
Command line SQL? Why not phpMyAdmin, or some other GUI?
( )Eduardo February 24th
pretty amazing!
( )M.A.Yoosuf February 24th
@Timothy: using command line will make you to remember, if u do with phpmyadmin or mysql Query browser yes its easy, but its not a big project only one table so its always better to go with the Command line Rather than the GUI.
BTW, nowadays Programming becoming so easy, hope all know about Pega and Windows Work flow foundation. all these uses for Big scale projects.
so my very last conclusion is always better to go up with what will make us remember for some time.
Cheers.
( )Yoosuf
Comment added By using Safari Beta 4
Amr February 24th
Actually, its not bad.. but too slow.. and no limitation for the comments in the page..
I’ve done sth like “Twitter Election which is over”.. with Rails and jQuery..
I hope to find time to send the tut to nettuts…
Cheers…
( )John McMullen February 24th
I’ve got a script similar to this I’m working on for a website, but instead of directly accessing the .val() of the form elements, I’m setting up a variable first. Problem is, any time there’s a single quote it messes things up. I’m going to give the direct access a gander.
Also, instead of just pushing the posts out, I use (’yourdiv’).load(’mysqlcall.php’) inside of a function and call that upon success of writing to the db.
Any thoughts on that vs. your way?
Great tut though! jQuery is the greatest.
( )John McMullen February 24th
^ As far as the single quotes issue, I wasn’t writing to the db as an escape string. Got that from your tut though;) Guess I need to start looking at that kind of stuff.
( )little February 24th
really nice!!!!!!
( )@indie_preneur February 25th
Does the name of the database have to be ‘comments’ as well as the table name? Or can I change the name of the db to be whatever I want and just need to change the instance of $database = and to the new name?
( )John McMullen February 26th
^ The name of the db or table can be whatever you want. Just be sure to reference it correctly.
( )Jam February 27th
A CAPTCHA and/or time delay would be an ideal implementation; this is WAY too easy to spam. Nice tutorial otherwise, though.
( )Dan Wellman March 20th
lol, I noticed (the spamming)
Agreed on the captcha, infact I saw a very, very niec jQuery powered visual cpatcha recently somewhere, integrating that would be both easy and fun
thanks for reading
( )mac sucks February 27th
Nice, your using vista… The way the world should be ran, through Windows! Nice tutorial, I have been searching for one of these.
( )ninad February 27th
this is nice but how can i view my old comments after this page refresh
( )rootboy March 2nd
thanks for this tutorial… i was already cursing you for not explaining how to create the tables (using whatever method, i don’t know what matters in MySQL), because it wasn’t working…
1) then i discovered i scrolled over the bit where you add the onclick handler to the html… (maybe keep the code bits in one piece would be better).
2) after that the comments DID show, but they weren’t apparently stored in the database, because the disappeared on reload. That was due to a spelling error in the database name in one of the php files.
When i cleaned up the traces of my own sloppiness, it works like a charm. Cheers.
Any more on the security problems would be appreciated though! Is it safe to use these scripts in the real world?
( )Bhavin March 3rd
Hi,
I was searching like the same thing since long… thanks…well i m upgrading it to some extent…….u have done gr8 job by starting it up….
my next plannings with this ,, are…
1. put Captcha for security
2. disbaling till comments / Captacha has been entered.
3. Put Multiple Comments component in just same page (need suggestion in it…)
im using php for server side scripting…. so please provide me suggestion if i have any idea to do that…….
Thanks again its good development,
( )Bhavin Shah
Rocky March 4th
Umm
if(!isset($this) !isset($that)){
( )echo ‘Fill out required stuff’;
};
thom March 13th
Is there anyway this tutorial could be adapted to make use of mootools instead of jquery. I am having conflicts on the page I am implementing it to and don’t seem to be able to fix it with the jquery noconflict
Any advice is greatly appreciated
( )Thom
test March 19th
abc
( )Dorin March 25th
Great job! I appreciate your good explanation.
( )Ryan March 26th
Ye I Agree
( )Bob March 28th
is there an easy way to add pagination?
( )ylcz April 2nd
good! easy to learn!
( )saurabh shah April 5th
very nice
( )Justin G April 6th
Any chance of getting a version with threaded comments similar to DIGG or Youtube comments?
( )enatom October 30th
I Really want that too.
( )Duron April 6th
Thanks
( )iooi April 18th
жопа
( )ghprod April 19th
Great …. the function like updater in prototype
Thnx for this tutz
regards
( )dan April 23rd
testing
( )jim carter April 26th
Tizag PHP tutorials http://www.emammablog.com
( )Shoolioms May 3rd
emm… luv it )
( )Michael May 19th
Good. But when I press the button, nothing happens.. Why?
( )luwe May 19th
Great tutorial, just what i was looking for !
( )Occuquan May 27th
Hello fellow coders, I see that some people are complaining that this script is not working. Well the first time I tested to make sure that it’s working, it didn’t! There are 3 important thing that you have to do when you want to use this script.
1. You have to change the MYSQL information (host, user name, pwd, db name) in the “addComments.php” and “comments.php” files!
2. Don’t forget to make the SQL table “comments” in your database with the fields “name” & “comment”
3. Then the most important thing, the jQuery plug in is not included in the source file, so make sure that you have a copy of the plug in near these files!
So good luck. Great script. Used it, Loved it! Thank!
( )Harshad June 10th
awesome, i’m trying to do it using ASP.NET and jQuery
( )ZK@Web Marketing Blog June 12th
i finally experimented until i got the css selector right. the preview is now right below the comment textarea and above the filter tips. This is still not ideal. Perhaps side by side is ideal (for wide screen monitors) but even then it would be very hard to line up the changing parts in the textarea and in the Preview once you get a few paragraphs into your comment. This is a really interesting problem that someone should solve
( )Tony June 16th
Thank You
( )Frank June 22nd
Great tutorial! How would I go about adding this to another page on the same site? Obviously I would need a second table, but how could I script it so that I wouldn’t have to rewrite everything just to access the second table for another page?
Thanks.
( )Eric June 30th
Just looking at the code in quick glance, I think that the easiest way via a plug n play of this script would be to duplicate the COMMENTS database and rename each database to WHATEVER, then inside the php files and the scripting, just change COMMENTS as in the dbserver to each name.
Thats just a quick look though… i am sure there are other options
( )Eric June 29th
OCCUQUAN!!! GREAT CALL!!!!
I WAS GETTING TICKED! LOL
Then i read number 3…..
This is sweet
3. Then the most important thing, the jQuery plug in is not included in the source file, so make sure that you have a copy of the plug in near these files!
So good luck. Great script. Used it, Loved it! Thank!
( )Eric June 29th
Is there a quick way to keep the comments up posted?
( )Sarah July 30th
Where can I get the jquery plug-in from ? Sorry but I am new at this and can’t manage to set up the jquery…
( )Sarah July 30th
http://jquery.com/ – I managed
( )Sarah July 31st
Hi Sorry again.. though I’m having problems as the comments aren’t appearing well! When a user writes a long comment its not going to the next line just stays writting out the text in a long straight line! Any idea how to fix this??
( )Mike August 13th
Is there a way to limit comments being shown? for exmpl. I want just 5 last comments to be displayed.
Is it possible to create a box where comments will be displayed, again only 5 last comm. would be visible. and you could go to 2nd,3rd page, but of that box. Can this be done? maybe with jquery?
( )Rob August 18th
Is there a way to use the data from json more like php?
Im pulling news items from the database they are listed in a table where the user can delete or open a page to edit.
Im hoping to use in place editing on those but am not sure with the way the data is passed over I can do that.
Also, my news items have formatting (from FCKeditor), when the data comes back from json, it isnt displaying is as html, but giving all the formatting tags
( )Jan August 22nd
great post, and what i need to do if I have 24 items and would to display this table of comments, but I want that in each item will only display the comment for that item and not for all in one…what I would need to do? please help
congratulations for the web site
( )Jan August 22nd
Just forgot to ask, how Can i delate some comments on it?
( )Jan August 22nd
have trouble now….when I post a comment and then refresh the page, the comment disappear…why this hapens?
( )Rudy August 26th
A good enhancement would be to make the code reusable, so you can use multiple comment areas on a page. (Such as, on a blog, where you’d have more than one post per page, and comments for each post.) Unless there is something already written on this site I haven’t found yet…
( )manish September 23rd
really this code is very effective…
( )David Moreen October 24th
I can not comprehend not easy this was. Simple functionality sure, but effective.
( )