Ajax Comments — How I did It September 20, 2005
One of the first questions asked of me was to make this into a plugin. Packaging this up as a plugin will be tough because it requires some detailed additions to your theme. You have to add javascript includes to your header file, you have to heavily modify the ‘form’ tag on the comments page, as well as add error and loading divs. Not to mention, the solution requires that your comments be inside ‘ol’ tags. That’s a recipe for disaster as a plugin and a support nightmare. The best I can do is offer the files for download and explain how I got it working and the rest is up to you.
Step 1: Download the squible theme and grab the following files:
ajax_comments.php
scripts/ (directory contains ajax_comments.js prototype.js and effects.js)
Step 2: Put these files in your theme directory:
wp-content/themes/yourtheme/ajax_comments.php
wp-content/themes/yourtheme/scripts/
Step 3: Add this code to your header.php file:
<script type=”text/javascript” src=”/wp-content/themes/squible/scripts/prototype.js”></script>
<script type=”text/javascript” src=”/wp-content/themes/squible/scripts/effects.js”>
Step 4: Replace your comments.php with the one from squible
If you don’t want to do step 4, then just change your form tag to look like so:
<form id="commentform" onsubmit="new Ajax.Updater({success:'commentlist'}, '<?php bloginfo('stylesheet_directory') ?>/ajax_comments.php', {asynchronous:true,
evalScripts:true, insertion:Insertion.Bottom, onComplete:function(request){complete(request)}, onFailure:function(request){failure(request)}, onLoading:func
tion(request){loading()}, parameters:Form.serialize(this)}); return false;">
</form>
I’d like to give a big nod of acknowledgement to siriux.net. I couldn’t get his solution to work, but his page was a great starting point.
Loading...
44 Responses to “Ajax Comments — How I did It”
Interesting, I have been considering playing around with this type of thing for a while now.
Looks like I have a place to start.
[…] theme release. by Scott | posted in Asides Trackback URL | Comment RSS Feed Tag at del.icio.us | Incoming links tagged as wordpress,ajax […]
Thanks! Been looking for something like this
You’re Quite welcome Ensellitis. :)
Nice
Very good tutorial! When I have some time…I am planning on implementing it on my site, also.
Nice! Almost the same as I did it ;-)
And it seems to be included in K2 as well.
However this version will break if JavaScript is not enabled. To allow non-JS users to still be able to post comments, keep the
action="/wp-comments-post.php" method="post"in the form tag. JS users still have the full Ajax experience, thereturn falsein the onsubmit tag does the magic.Hi Nico, I don’t know if you noticed, but I acknowleged your solution in my post. If it wasn’t for your solution, I wouldn’t have gotten mine to work! :)
Cool!
Theron Parlin: sure I acknowledged, that’s why I’m happy (you even posted a Trackback to my site) :-)
awesome ! No when will i have time to add this god knows !
[…] WordPress AJAX Commenting Not a plug-in but a way to integrate it in to your existing theme. by Scott | posted in Asides Trackback URL | Comment RSS Feed Tag at del.icio.us | Incoming links […]
I’ve tried it in my testing environment and found a problem. My blog is Chinese under UTF-8 encoding. After I posted the comment using Chinese, the Chinese characters become rubbish characters. I have to refresh the whole page in order to view the correct Chinese characters.
P.S. There is no problem when I use English.
tinyau: I just tested it on http://siriux.net/news/2005/07/13/ajax-commenting/ (copy and paste your chinese characters) and it worked perfectly, even without refreshing. Did it work for you too there?
Nico, it works there but I don’t know why it failed in my testing environment.
hi. pls advise. i want to know which file i need to modify to change the background color of this theme (red, black) and pls tell me also which files to work with if i want to play with the fonts and background’s color. will highly appreciate your replies
Gummy, please use the discussion forum for these types of questions.
hello, ive tryed several ways, but i cant make it work, even replacing my comments.php with yours…
any advice?
any obscure option that i should edit? i cant see where’s the problem, and i’d love to get it working :(
otama: Did you try to disable the scrobbler plugin?
I need to disable it? duh… >_
Ive tried to disable it, but it keeps reloading the whole page…
otama: ok, scrobbler seems to be something else ;-)
The problem are the lines in the header of your template. Move the “script” elements into the “head” element (e.g. right under the “meta name=generator” element) and replace the quotes with real quotes (if you copy&pasted them from here they may be wrong).
lol, the quotes where wrong… lots of thanks for that.
now it does not load the page again, but the comments doesnt show… nothing happens when i hit the “send comment” button, but if i reload the page, the text apears…
sorry for bothering :_(
maybe theres something wrong in the form tag?
/wp-comments-post.php" method="post" id="commentform" onsubmit="new Ajax.Updater({success:'commentlist'}, 'http://www.diauno.com/wp-content/themes/scattered/ajax_comments.php', {asynchronous:true, evalScripts:true, insertion:Insertion.Bottom, onComplete:function(request){complete(request)}, onFailure:function(request){failure(request)}, onLoading:function(request){loading()}, parameters:Form.serialize(this)}); return false;" >
ok, i cant post code, sry :(
could have i some kind of javascript error? :(
otama: you are missing the “errors” div element where errors are displayed. Look at the HTML code of this page e.g. to see what I mean. And, to avoid the next problem, the “commentlist” ol element must be displayed even if there is no comment. DÃaUno does not seem to display it when there is no comment.
(Well, I didn’t say it’s easy to integrate ;-))
just a test
Hot, I want this.
also, testing. sorry!
Has the issue regarding comment number not being shown as 1 been resolved?
Testing
teeeeeeeeesting
Testing 1, 2, 3
test
Doesn’t look like your Ajax comments work when there is a ” ” sign in the email address section, otherwise this is a brilliant implementation.
Hmm, looks like it got rid of the plus sign all together. But that is what I was talking about, the plus sign in the email address messes up the ajax comments.
Very clever. Excellent, in fact.
Well done.
I’m intrigued as to how the comment number is inceremented when the Ajax comment is posted on Squibble, while it does not work on K2, which only shows comment no 1, until you refresh the pages that is.
Any ideas or clues to why this happens? Thanks.
K2 is probably manually numbering the comments, while I’m using <ol>.
I just had a look at K2 comments.php and see that it does use the <ol> tags. However, I found that a separate ordered list is created for the pingbacks. So could that be the case?
Hmm, that’s hard to say. I honestly don’t know — have you tried asking in the k2 forums?
Theron, it’s an acknowledged bug in K2 and I’m not sure how far they got to having it fixed. So was trying to figure it out myself to see if it’s fixable. But I’m no PHP guru and these count variables are driving me up the wall. Thanks for your help!
[…] Explicación para convertir tus comentarios a la actual web 2.0 mediante Ajax. Recuerden hacer una copia de seguridad antes de tocar el código de vuestro theme. Wordpress, Miniblog | Enlace permanente # | […]