New WordPress Plugin: WDP AJAX Comments
Aug 13th, 2009 - 41 Comments »
Posted in AJAX jQuery Wordpress
Today, I am proud to release my first WordPress plugin named “WDP AJAX Comments”. This plugin will enable AJAX Comments on your WordPress Blog and enhance the user experience using nifty on page comment form submission and validation of input before submission.
Features
- Enable AJAX Commenting
- Client Side Form Validation
- Easily rolls back if JS disabled
- Easily configure custom styles for messages
Download
Download the Plugin from official WordPress Plugin repository.
Installing & Activating
Here’s how to install and use this plugin to its full potential:
1. Firstly, go to Add New Plugin in your WordPress admin panel, and search for wdp ajax comments and you’ll see the listing, install the plugin by clicking on ‘Install’. Or you can go to WordPress plugin repository page and download the plugin and extract it in your wp-content/plugins folder.
2. Now activate this plugin, and your blog is ready with AJAX comment posting, but one thing you still need to do is enabling the client side comment form validation.
3. To enable form validation, refer to the below section.
Enabling Comment Form Validation
This plugin makes use of jQuery Validation plugin to validate comment form, so you will need to add some css classes to your comment form. Here’s how to do that:
1. Open up your theme’s comments.php file in an editor.
2. Find out the code lines where comment form starts.
3. Now, you need to add following CSS classes to comment form inputs:
- To comment author name input, add
class="required" - To comment author email input, add
class="required email" - To comment author URL input, add
class="url" - To the comment textarea, add
class="required"
4. Save the file and now your comment form validation will work.
Styling The Messages
WDP AJAX Comments provides you with full control over the looks of various messages using CSS. To define your own styles, create a new stylesheet file named wdp-ajax-styles.css in your theme’s folder and define styles for these classes:
.wdpajax-errorThis class is used for the message shown when AJAX error is encountered..wdpajax-successThis class is used for success message shown after successful comment submission..wdpajax-loadingThis class is used to show the ‘Processing..’ message while performing AJAX request. You can add animated loading gif’s as background to give a nice AJAX effect.label.errorThis class is used to show validation errors.
If your theme folder does not contain wdp-ajax-styles.css file, the default stylesheet of the plugin will be used.
Demo
If you would like to see the demo, go to the demo page.
What to Expect in Coming Versions
Currently, this plugin just AJAXifies comment submission and does not update the comments displayed automatically. So, this is one of the feature you should expect in coming editions. Another feature i have thought is giving you control over the messages displayed on AJAX requests.
If you would like to suggest a new feature, feel free to comment below, just prepend your comment with Suggestion.
If you have used this plugin on your blog, post the address of your blog too, so that other can have a look.
In case you need any assistance, feel free to use the comment section below
Share
Subscribe to Full RSS Feed
If you found this article
useful, then consider subscribing to our
RSS Feed or
e-mail updates to stay updated with
latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.
10 Ways To Make Your Blog’s Comment Form Stand Out
41 Responses (Add Your Comment)
Comments are closed for this post.
12 Lesser Known But Useful WordPress Hacks
15 Ways to Improve CSS Techniques Using jQuery
25 Incredibly Useful CSS Tricks You Should Know
hey dats really nice… i luv ur blog ………nice plugin work…………..
Nice work. Have you considered adding the DISQUS plugin? It’s brilliant and opens your blog up to a whole new world of commenting and makes it easy for others to comment using so many different services. I started using it recenlty and it actually increased the traffic to my site.
This is a great plugin! Works perfectly.
One problem though is that the javascript messes up the WordPress admin for me on 2.7.1. The WordPress buttons on the left that have javascript don’t work now and features like “quick edit” have gone away. Also, the “Tags” form field on the right side of the admin is now really wide and the “most used tags” feature is gone.
Is there a way to disable the javascript in the admin but leave as is on the blog? That seems to be the problem here. Thanks!
Thanks for notifying about the issue. I have gone ahead and updated the plugin, now the javascript files do not load on admin panel. Update the plugin to version 1.0.7 from your plugins management panel.
this really isn’t working for me.
After enabling the client side validation stuff i am unable to post a comment on my blog at all. It keeps telling me that one of the fields might be blank. But I have filled in all the required fields.
I have added class=”required” to the comment text area and author text box. I added class=”email required” to email. And i added class=”url” to the website text box.
thanx for the help!
Jace
jace, can you provide me with the URL where you implemented this, looks like there is problem with the server response when you submit comment.
hi, i’ll re-enable the plugin now, just visit http://www.road2japan.com and play around with some test comments and let me know what you can deduce.
hi jace, i tested your site and it worked fine for me, though for the first time, i got the same error which you reported earlier, that was due to server timeout when the comment was posted.
I’ll modify the error messages based on the type of error soon.
I updated to version 1.0.7 this morning and it works perfectly for me on 2.7.1.
Thanks webdeveloperplus!
I’m testing to see if this comment submits with AJAx.
try the demo URL above to test it.
congrats for ur new dazzling discovery, the new wordpress plugin “WDP AJAX Comments”. it shows ur intellectual craft.
thanks for the plugins
Hi there
I just used your test link above but it doesnt seem to work
all fields are filled in yet i get the error – You might have left one of the fields blank.
I am currently testing this url
http://demo.webdeveloperplus.com/wordpress/2009/08/sed-sit-amet-mi-mauris-id-nibh/
Ok quick update
it sesms as thog that error message is actually for the comment box!
i’ve not looked at your code but my guess is that you have a min number of characters set for the comment box if the input is below this you get the error message
‘You might have left oen of the fields blank’
really this error should be
‘Check Comments / No longer enough’ or words to that effect
Comment field just has the required attribute, it has no min. length or so restriction, i don’t know why it isn’t working for you, may be you should try clearing browser cache, it might help or probably you are trying to post same comment again and again
after running more tests i’d have to say i’ve come to the same conclusion as Tiger. (i’ve been experiencing the same problem)
Basically I submitted name, e-mail, and “test” in the comment box like 10 times – 0% success. But i extended “test” to “testtesttestte” and it submitted. Tested again and I had to submit “testtesttesttes” (1 extra char) for it to submit.
Submitting works fine if you’re logged into WP already, but having troubles if you’re logged out and have to enter your details.
in WordPress, when you submit same comment again on same post, it returns an error code with HTTP status 500, that’s why the error shows up, that’s why when you modify comment, it gets posted.
There’s nothing like character limit i have put on comment box.
I told u will improve the error notification.
yes mate its something with the comment box
it really is acting as though its looking for a minimum length before submitting (which is a good idea – assuming the error message matches though)
I hope you are able to see the issue mate – but it does exist
not sure why its so random though
webdeveloperplus: “that’s why the error shows up, that’s why when you modify comment, it gets posted.”
This isn’t the case. Altering the comment doesn’t always work. I could add “asdf” as the comment, get the error, then change it to “asdfg” and it STILL WOULD ERROR. Then i could just hammer my keyboard: “asdfgdfjal” – still error. but then i’d just add another letter or something and it would post.
@jace, @tiger: i have found the problem why you were getting errors.
It was due to WordPress preventing duplicate comments and comment flooding.
WordPress has inbuilt procedures to prevent comment flooding, i.e. when same client or user who is not logged in submits multiple comments in short span of time, it is treated as comment flood, and comments are discarded.
This is the reason why it behaved like this.
And, i’ve improved the error notification, you can check the demo at
http://demo.webdeveloperplus.com/wordpress/
You’ll receive the notification for plugin update within few hours or you can manually update by downloading the latest version from here: http://wordpress.org/extend/plugins/wdp-ajax-comments/
Thanks webdeveloperplus, looks great now. I’ll run a bunch more tests but i think there shouldn’t be a problem.
However! I have one more question! How do I make the comment appear immediately without the page refreshing? Like it does on the test page. Is this plugin supposed to make this happen? or is there somewhere else you can point me to?
Thanks again!
Jace
this feature is not yet available, but i do plan to include it in future release.
Thanks for testing out and identifying the problems.
Nice script, works like a charme. Just one thing: I tried to load the js-files just when a single page is displayed and comments are open. In the “wdp-ajaxed-comments.js” u have the line
if(!is_admin())
Do you know why I am not able to change this line to
if(!is_admin() && is_single() && comments_open())?
Even changing “!is_admin” with just “is_single”, “comments_open” or “is_singular” doesn’t work – any idea why?
Greetz,
Olli
All seems to work well
Thanks
Hi,
We have just installed this promising plugin onto our test site. Modified my theme’s comment.php exactly as you advised. For some reason the ajax function is not working as the page reloads during submission. The submission goes through, but the page reloads. Any suggestion would be greatly apprecited.
Thanks,
r
PS: we use WP2.8.4
Hi rayhan,
Plugin worked fine on your site when i tested it and comment was successfully posted using AJAX, try clearing browser cache or test it on a different browser and let me know if you encounter any problem.
Hi,
My mistake. The comments post successfully. The only problem is that they are not displayed rightaway. One needs to refresh the page to see the submited-published comment. You have already mentioned you are currently working on this, so we all look forward eagerly for the plugin’s update. Thank a lot again for creating this excellent tool.
Cheers,
R
Hello, I have just installed the plugin and I’m having a little trouble getting it going. I did clear my cache but to no avail. It seems to be still hitting the wp-comments-post.php. Could it be something with the URL? My blog is not on the root, it resides in a subfolder off of the root. Thanks in advance.
Should have mentioned I’m using 2.8.4 WP. Thanks.
Is it possible to translate your plugin into other than english language?
Can I directly edit messages shown to client/user during validation etc.? Or maybe because of this edition I can spoil the software…?
Wow – this is great. I’ve just got one problem – I always get an error telling me “Error in processing your form.” However, the submission is successful. I can reload the page and see it. So the comment really posted. Any idea why it is getting faked out? I tried clearing the cache and it did not fix the problem.
I’m using the SI-CAPTCHA plugin too. The comments.php is the default except that I edited the input fields to be required (works like champ). I also made a minor edit to the SI-CAPTCHA plugin so that it’s field could also be marked required.
Any insights as to what’s causing the false error messages? Real error messages seem to get captured just fine.
Just wanted to try this!! And really work
Where can I get a copy of the JS file uncompressed?
Wow, this is awesome.