New WordPress Plugin: WDP AJAX 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"

modify comment form

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-error This class is used for the message shown when AJAX error is encountered.
  • .wdpajax-success This class is used for success message shown after successful comment submission.
  • .wdpajax-loading This 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.error This 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

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf 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.

41 Responses (Add Your Comment)

  1. hey dats really nice… i luv ur blog ………nice plugin work…………..

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

  3. Dan says:

    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.

  4. jace says:

    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

  5. Dan says:

    I updated to version 1.0.7 this morning and it works perfectly for me on 2.7.1.

    Thanks webdeveloperplus!

  6. AJAX Tester says:

    I’m testing to see if this comment submits with AJAx.

  7. Naresh says:

    congrats for ur new dazzling discovery, the new wordpress plugin “WDP AJAX Comments”. it shows ur intellectual craft.

  8. beldit says:

    thanks for the plugins

  9. Tiger says:

    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/

  10. Tiger says:

    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

    • jace says:

      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.

  11. Tiger says:

    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

    • jace says:

      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/

  12. jace says:

    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

  13. Olli says:

    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

  14. Tiger says:

    All seems to work well

    Thanks

  15. rayhan says:

    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.

      • rayhan says:

        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

  16. Jason says:

    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.

  17. Jason says:

    Should have mentioned I’m using 2.8.4 WP. Thanks.

  18. krzychu says:

    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…?

  19. Aaron says:

    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.

  20. Lane says:

    Where can I get a copy of the JS file uncompressed?

  21. Anon says:

    Wow, this is awesome.

Comments are closed for this post.