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

Related Posts

1. How To: AJAXify WordPress Comment Posting
2. 10 Ways To Make Your Blog’s Comment Form Stand Out
3. AJAX Multiple File Upload Form Using jQuery

Today i will show you how to enable AJAX comments with client side JavaScript comment form validation on your WordPress blog step by step that should work with most versions of WordPress. We’ll be modifying the WordPress theme files to do that. In few days, i’ll be releasing a WordPress plugin that will automatically enable AJAX Comments. So, do subscribe to our RSS Feed or e-mail updates so that you are the first to know about it.

Let’s start with it.

Functions.php file

Add the following lines of code to your theme’s functions.php file. If your theme doesn’t have one, then create a new file and add it to your theme folder.

add_action('init', 'wdp_ajaxcomments_load_js', 10);
function wdp_ajaxcomments_load_js(){
		wp_enqueue_script('ajaxValidate', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/jquery.validate.min.js', array('jquery'), '1.5.5');
		wp_enqueue_script('ajaxcomments', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/ajax-comments.js',	array('jquery', 'ajaxValidate'), '1.1');
}
add_action('comment_post', 'wdp_ajaxcomments_stop_for_ajax',20, 2);
function wdp_ajaxcomments_stop_for_ajax($comment_ID, $comment_status){
	if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
	//If AJAX Request Then
		switch($comment_status){
			case '0':
				//notify moderator of unapproved comment
				wp_notify_moderator($comment_ID);
			case '1': //Approved comment
				echo "success";
				$commentdata=&get_comment($comment_ID, ARRAY_A);
				$post=&get_post($commentdata['comment_post_ID']); //Notify post author of comment
				if ( get_option('comments_notify') && $commentdata['comment_approved'] && $post->post_author != $commentdata['user_ID'] )
					wp_notify_postauthor($comment_ID, $commentdata['comment_type']);
				break;
			default:
				echo "error";
		}
		exit;
	}
}

Code Explanation: Firstly, we load required JavaScript files jQuery, jQuery Validation and ajax-comments.js using the wp_enqueue_script() function. wp_enqueue_script() accepts four parameters.

• First is the name of the handler for JavaScript file, you can use any name here for your own custom JavaScript, but for files that wordpress include by default like jQuery, there are pre-fixed handlers like ‘jquery’.
• Second parameter is path to JavaScript file.
• Third parameter is the array of name of handlers of JavaScript files, which must be loaded before the specified file.
• Last is the version number of JavaScript file which you should use in case you use caching on your blog.

The function wdp_ajaxcomments_stop_for_ajax() hooks onto the comment_post action which is triggered after a comment has been successfully added to the database. normally, what happens when you post a comment is that you are redirected back to the original post, but since we will be using AJAX, we don’t want a redirect but a message about the status of comment posted.

I recently read a nice post from David Walsh where he told about how to identify AJAX requests using $_SERVER["HTTP_X_REQUESTED_WITH"] which is populated by most JavaScript frameworks like in our case jQuery.
I used it to hook into comment_post and check whether it is AJAX request or normal request. If it is AJAX request then check the status of comment, if it is unapproved or approved, a message ‘success’ is output and moderator or post author is notified accordingly.
After identifying AJAX request, i stopped the script execution using exit statement so as to prevent the redirect.
Now rest is the job of JavaScript code.

The JavaScript Code

You will need to add two JavaScript files jquery.validate.min.js and ajax-comments.js in the js directory of your theme(Files are available at the end of article). Create the js directory and add files if it does not exist. Though jQuery is required to work, but since it is included in WordPress by default, it will automatically be loaded as we specified it as a requirement while loading JavaScript files in functions.php.

jQuery Validation plugin is used to validate comment form data.
Here’s the code and explanation for ajax-comments.js.

jQuery('document').ready(function($){
	var commentform=$('form[action$=wp-comments-post.php]');
	commentform.prepend('<div id="wdpajax-info" ></div>');
	var infodiv=$('#wdpajax-info');
	commentform.validate({
		submitHandler: function(form){
			//serialize and store form data in a variable
			var formdata=commentform.serialize();
			//Add a status message
			infodiv.html('<p>Processing...</p>');
			//Extract action URL from commentform
			var formurl=commentform.attr('action');
			//Post Form with data
			$.ajax({
				type: 'post',
				url: formurl,
				data: formdata,
				error: function(XMLHttpRequest, textStatus, errorThrown){
					infodiv.html('<p class="wdpajax-error" >You might have left one of the fields blank.</p>');
				},
				success: function(data, textStatus){
					if(data=="success")
						infodiv.html('<p class="wdpajax-success" >Thanks for your comment. We appreciate your response.</p>');
					else
						infodiv.html('<p class="wdpajax-error" >Error in processing your form.</p>');
					commentform.find('textarea[name=comment]').val('');
				}
			});
		}
	});
});

Code Explanation: Firstly, we append a div to comment form that will show AJAX status messages. Then we intialize jQuery Validation on comment form and if validation is successful, we will use jQuery AJAX to send the form data to the action URL of comment form and display a message accordingly.

Now, uptill here, if you have followed along and worked as told, you’ll find that AJAX comment posting works but validation doesn’t. Since, we are using jQuery Validation plugin, you will have to now edit the theme’s comments.php file.

Enable Comment Form Validation

Open your theme’s comments.php and add some CSS classes to comment form input fields as described:

• 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"

Now the comment form validation should work. But it might be having awkward looks or styles, now the last step is to customize the looks of messages using CSS.

Customize the Styles of Messaages

The error messages from validation use labels with CSS class error. While the AJAX post request status messages use two CSS classes, wdpajax-success for AJAX success and wdpajax-error for error message. Define the styles for these classes in your theme’s stylesheet file. Here’s what i have used:

.wdpajax-error{
	border:1px solid #f9d9c9;
	padding:5px;
	color:#ff3311;
}
.wdpajax-success{
	border:1px solid #339933;
	padding:5px;
	color:#339933;
}
label.error{
	float:none !important;
	padding-left:5px;
	color:#ff3311;
}

There you are with cool AJAX comments on your WordPress Blog.

Click here to view the Live demo(Try commenting on one of the posts).

To download the required files, Click here
If you find any problems or error, do let me know in comments.

Plugin

If you find modifying theme file difficult, or if you regularly change your blog’s theme then it will be difficult for you to modify theme files every-time you apply a new theme. so, i have created a plugin named WDP AJAX Comments that will automatically add AJAX commenting to your blog.
So, do subscribe to our RSS Feed or email updates so that you are among the first one to get the plugin.
Enjoy!

Related Posts

1. New WordPress Plugin: WDP AJAX Comments
2. 10 Ways To Make Your Blog’s Comment Form Stand Out
3. 12 Lesser Known But Useful WordPress Hacks

Dzone also implements this technique to show items as you scroll down the list.

Similarly, Facebook has also started using this technique to load more posts in user’s home page as you scroll down.
Today, I am going to create a similar dynamic content box that loads more content dynamically as user scrolls to the bottom of the box.

View Working Demo

The HTML Structure

<div id="container">
	<div id="scrollbox" >
		<div id="content" >
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
		</div>
	</div>
	<p><span id="status" ></span></p>
</div>

The scrollbox div is the one that has fixed width and height and houses the content div that stores the content. The status span is used to display number of loaded items or the status message of loading more items.

The CSS Styles

The height and width of scrolling div is fixed using CSS and its overflow property is set to auto so that it gets a scrollbar when content exceeds the height or width. But to prevent horizontal scrolling, i added overflow-x:hidden attribute so that scrolling only occurs up or down.

#container{
	width:400px;
	margin:0px auto;
	padding:40px 0;
}
#scrollbox{
	width:400px;
	height:300px;
	overflow:auto; overflow-x:hidden;
}
#container > p{
	background:#eee;
	color:#666;
	font-family:Arial, sans-serif; font-size:0.75em;
	padding:5px; margin:0;
	text-align:right;
}

The Concept

Now to load more content on scroll, you will need to understand the concept behind the JavaScript code given below. To start with, i will be using, three attributes of DOM objects namely, scrollHeight, clientHeight and scrollTop. scrollHeight is the actual height of the inner content of a box, i.e. the actual height of content in the scrollbox container in our case. clientHeight specifies the height of the viewport container i.e. height of the visible region which is the height of scrollbox div in our case.
The scrollTop is the distance in pixels the content which has moved up.

Here is an illustraton specifying these properties.

When the scrollTop becomes equal to scrollHeight-clientHeight, then the scroll bar has reached its bottom position, so this is the point when we need to fetch new items. To make the scrolling box more useful, i added another value called scrolloffset, which keeps track of the fact that how many pixels before the bottom the scroll bar is, so that we can start fetching new items instead of the user scrolling to the bottom and then waiting for content to load.

The JavaScript Code

Here’s the JavaScript code you will need. As always, you will need to include the latest jQuery library into your page header before this code.

$('document').ready(function(){
	updatestatus();
	scrollalert();
});
function updatestatus(){
	//Show number of loaded items
	var totalItems=$('#content p').length;
	$('#status').text('Loaded '+totalItems+' Items');
}
function scrollalert(){
	var scrolltop=$('#scrollbox').attr('scrollTop');
	var scrollheight=$('#scrollbox').attr('scrollHeight');
	var windowheight=$('#scrollbox').attr('clientHeight');
	var scrolloffset=20;
	if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
	{
		//fetch new items
		$('#status').text('Loading more items...');
		$.get('new-items.html', '', function(newitems){
			$('#content').append(newitems);
			updatestatus();
		});
	}
	setTimeout('scrollalert();', 1500);
}

Code Explanation: The updatestatus() function counts the number of items loaded into the content and displays it in the status span. The scrollalert function checks the current scrollTop position of the scrollbox div and if the scroll bar is near the bottom area, new items are fetched using AJAX.
Here i am using new-items.html that simply displays some items for the content box as this is just a demo. In actual application, you might employ some server side script that will load next items from the result set.

The content obtained via AJAX is then appended to the content div and updatestatus() is called to update the status message. setTimeout is used so that position of the scroll bar is checked periodically and if it matches condition, then new items should be fetched.

So, there you are with a dynamic content box just like Google Reader or DZone.

View Working Demo or Download Source Code n Try
Enjoy!

Multiple file upload forms are sometimes essential for your web application but managing upload from multiple file input boxes becomes a bit tedious and lengthy. But thanks to jQuery using which we can make this task easier too. Today I’m going to create an AJAXified multiple file upload form that uses a lot lesser server side code and also provides a very nice user interface.

For this tutorial, i’ll be using latest version of jQuery and Ajax upload library by Andrew Valums. Grab both libraries and add them to your page header

The HTML Structure

As i said, the upload form will be intuitive, we won’t be using the classic File input box. So, First of all create the upload button on which user will click to open the File Selection dialog.

<div id="upload" >Upload File</div>

You can use any element you want for the button. I just applied some basic style to this div, you can apply any style you wish to make it look more attractive.

#upload{
	margin:30px 200px; padding:15px;
	font-weight:bold; font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#f2f2f2;
	color:#3366cc;
	border:1px solid #ccc;
	width:150px;
	cursor:pointer !important;
	-moz-border-radius:5px; -webkit-border-radius:5px;
}

I also added a span element next to upload button to show various messages during processing. And to show the uploaded files to the user, i added an unordered list next to the button. Here’s the complete html code.

<!-- Upload Button-->
<div id="upload" >Upload File</div><span id="status" ></span>
<!--List Files-->
<ul id="files" ></ul>

The PHP Code

To upload the files to server, here’s a basic file uploading script in PHP that displays ‘success’ if file uploaded successfully otherwise displays ‘error’.

upload-file.php

<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']); 

if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
  echo "success";
} else {
	echo "error";
}
?>

The JavaScript Code

And lastly the javascript part. The AJAX Upload library you included earlier will do all the heavy lifting for you. Here’s the JavaScript Code you’ll need.

$(function(){
	var btnUpload=$('#upload');
	var status=$('#status');
	new AjaxUpload(btnUpload, {
		action: 'upload-file.php',
		//Name of the file input box
		name: 'uploadfile',
		onSubmit: function(file, ext){
			if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                  // check for valid file extension
				status.text('Only JPG, PNG or GIF files are allowed');
				return false;
			}
			status.text('Uploading...');
		},
		onComplete: function(file, response){
			//On completion clear the status
			status.text('');
			//Add uploaded file to list
			if(response==="success"){
				$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
			} else{
				$('<li></li>').appendTo('#files').text(file).addClass('error');
			}
		}
	});
});

Code explanation: to use the AJAX Upload library we need to initialize the AjaxUpload object and provide it with parameters. The first parameter is the id of the button element on which the user will click and second is the server side script that’ll handle file upload. The second parameter can accept an array of various options to give you more control over the process.

And that’s exactly what i’ve done.

• The action field is the path to server side script,
• name is the name of file input box(hidden) which will be used for upload. If you change this value, make sure to change the server side script corresspondinly.
• onSubmit lets you perform some function before the file is uploaded e.g. you can check the file extension like i’ve done above or show a status message.
• onComplete lets you perform some action after the upload is complete e.g. I’ve shown the uploaded image to the user.

And if you want to limit the number of files that a user can upload at a time, simply use this.disable() within onSubmit or onComplete to disable the upload button after checking for some condition.

Note: The file upload using AJAX is not true ajax as it uses hidden iframe to upload the form data but his whole process is transparent by using the AJAX Upload library and gives a feel of AJAXified file upload.

View Working Demo or Download Source Code n Try.

Related Posts

1. Multiple File Upload With Progress Bar Using jQuery
2. Create a Dynamic Scrolling Content Box Using AJAX
3. AJAX User Poll Using jQuery and PHP