Project Ajaxizing the builtin comment form

From the working samples we've done so far with .load and .getJSON, you can probably think of many extremely cool ways to implement AJAX in your WordPress site. The most useful application of this is the comment form.

First up, we don't even need to amend any template page HTML or WordPress Template Tag, PHP code. This is great as again, as often as possible (all the time really) we always want our site to work without the jQuery enhancement.

Ajaxing the WordPress comment form is deceptively simple. And for you "premium" theme developers, it's a great way to entice people to download your theme: "Built in AJAX comments!". It is something that we'd like full control over, so we'll be using the .ajax() function instead of .load (see, I told you .ajax would come in handy every now and then).

First off, in experimenting with the comment form, we'll be wanting to change its CSS properties to alert users to errors. I've found it's just better to set the form's CSS to something consistent that we can then change easily in jQuery for other uses. Add the following code to your custom-jquery.js file to change the CSS properties of the default theme's comment form styles.

jQuery('#commentform input')

jQuery('#commentform textarea')

We're now ready to "take control" of the form. Upon submit, we want our jQuery to do the talking, not the form's "action" attribute. So we'll use a handy function called .submit() like so:

j Query('#commentform') .submit(function(){

//turns all the form info into an object var formData = jQuery("#commentform") .serialized;

//so we can display the comment back to the user var comment = jQuery('textarea#comment').val(); });

Note our use of another handy, little known jQuery function called .serialize(). This takes all the data in our #commentform form and upon submit, turns it into a handy object that we can now pass on in our .ajax function.

Inside the .submit function, under the comment variable, let's add in our .ajax call. We'll be using this function because we need a little extra control and will be taking advantage of its success: and error: callback functions. Read through the code's bold comments to follow along:


//this is the script that the comment form submits to: url: "/wp-jqury/wp-comments-post.php",

//formData is our serialized content object data: formData, success: function(){

//on success load content and fade in:

//on error, inform user of what to do:

//this makes sure the page doesn't reload! return false;

That's the gist. We're now ready to get down to work by setting up the success: and error: functions. Let's start with the success: function.

We'll first want to create a div that will contain a message. We'll then add our message to that div along with the comment variable that we set up earlier (under our formData serialized object) to pull the comment entered in the form into our code.

We'll also be sure to add in a little jQuery "shine" and leverage some of those animation skills from Chapter 5, jQuery Animation within WordPress to make sure the success response loads in nice and smooth. Inside the success: function() brace brackets, insert the following code:

//on success load content and fade in: //create the div that the message goes in jQuery('#respond').prepend('<div class="message"></div>');

jQuery('#respond .message')

.html("<div style='border: lpx solid #ccc; padding: 5px 10px'> <b>Thank you.</b><br/>

<i>Your comment may be pending moderation.</i> </span><br/> "+comment+"</div>") ,hide() //then hide it!

.fadeIn(2 000); //then fade it in nicely

When the Form is properly filled out, the end result is this message that fades in:

Your comment may be pending moderation.

Here's my comment. Lorem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Your email address will not be published. Required fields are marked *

Here's my comment. Lorem ipsum dolor sit amet, cgi^&etur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

You may use these HTML tags and attributes: <a href-"" title«""* <obbr title-""> <acronym title-""> <b>

We're now ready to tackle the people who don't fill the form out properly. The wp-comments-post.php file does throw an error back if the required fields are not filled out. We can use this to our advantage by just checking for an error using the error: function.

Nice, we just created some slick commenting functionality for our WordPress site using AJAX!

Shouldn't some of these examples be WordPress plugins?

As mentioned in Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together, if you create a jQuery enhancement that doesn't require any tweaks or edits to the WordPress theme, and will work with most themes released for public use, you may want to consider wrapping up your scripts into a separate WordPress plugin.

This is a handy practice if you're busy and don't want to amend a new theme with all your custom jQuery scripts every time you swap themes, or if you're part of a larger project with lots of people or if you just simply want to share your jQuery work with less technical WordPress users. Follow the steps in Chapter 3, to wrap your jQuery scripts and plugins into simple WordPress plugins so that any less-technical administrators can easily add and remove them from their projects.

Also remember, Chapter 3, walks you through creating a jQuery plugin as well. You'll probably be able to condense and clean up your code by placing it into a jQuery plugin that you then wrap into a WordPress plugin. This should also make creating updates and enhancements of your scripts easier to manage. You'll then have better organized code that you can document and share with both worlds: jQuery developers and WordPress enthusiasts.

Think about it though: if a jQuery enhancement is dependent on any custom, special markup that you've edited a theme to generate (such as our post list example at the beginning of this chapter), it's better to leave that jQuery script as part of the theme, as it won't work outside of it. This is a good thing for super-custom or premium themes. By making your enhancements part of your theme, you can entice people to download it because it offer features they don't need to then go out and find separate WordPress Plugins for.

Blogging 101

Blogging 101

Turn your posts into cash... If You’ve Been Struggling To Make Money With Your Blog You Must Read This!! If you are like me then you’ve been working non stop to find ways to promote your blog so that it will start earning money.

Get My Free Ebook

Post a comment