Creating Ajax Comments with CodeIginiter and JQuery

While working on the HiPPstr comments, I didn’t understand why other sites required you to go to another page to submit a comment, maybe to prevent over submission, Well I went ahead with it anyway.

I settled on JQuery for my Javascript Framework, it seemed to do a lot out of the box, with lots of plugins and a big community, also the base distribution was a lot smaller than other tools such as MooTools.

I had never done any Ajax Before so this was a little bit of an adventure. If you don’t know ajax is really just a buzz word it stands for Asynchronous Javascript and XML, it’s a very commonly used technology in web 2.0 web applications, which allows actions and http requests to be done without requiring the page to be reloaded. This gives web applications more of a desktop feel.

I started by downloading and installing the base jquery library to the static folder I created for all static images, stylesheets and javascripts. Next I put it in my header.php view which generates the headers for all my pages.

<script language="javascript" src="<?=base_url()?>static/js/jquery.js" ></script>

I decided to load it on every page as I just assumed I’d be using a lot of javascript, I also put in another few lines to dynamically load any other scripts or plugins I might need for jquery.

<?php if(isset($scripts)) {foreach($scripts as $script) { ?>
	<script language="javascript" src="<?=base_url()?>static/js/<?=$script?>"></script>
<? } }?>

To add another script I simply set $data[’scripts’]= array(”script1.js”, “script2.js”); in my controller. This was the simple bit. Next I just wrote a standard method to insert the comment into the database taking the variables from a posted form and inserting them into the database using a model (see MVC on Wikpedia).

Now I had to write the AJAX bit. Since I’d never used Javascript/AJAX before, I looked around the very good JQuery Docs and started to cobble together something that would work. It turns out it was very simple, AJAX always looks scary from someone looking from the outside but when you actually get into it it’s not hard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(document).ready(function(){
	$(".addcomment").hide(); // Hide the comment form
	$("#message").hide();	// Hide The Message Div
	$(".actions a.show").click(function(event){ // Show the comment form
		$(this).parents("div").prev(".addcomment").slideToggle("slow");
		return false;
	});
 
	var options = { 
		beforeSubmit: validate,
	    target: '#comments',
		success: formSuccess
    }; 
 
   	// bind form using 'ajaxForm' 
	$('#newcomment').ajaxForm(options);
 
	$('.comment-links a').click(function(event){
		var link = $(this).attr('href');
		$('#comments').empty;
		$('#comments').load(link);
		return false;
	});
});

Above is the basic javascript that was required, the first line hides the comment form which is accessible via an “add a comment” link which is bound on the 3rd lines, so when clicked it shows the .addcomment div. Then I bind the form using the JQuery Form Plugin’s ajaxForm function to bind the form, I pass to it the options var which contains three arguments, firstly it runs the validate function (not shown above), it sets the target, whatever the http post request returns will be put into the #comments div, in this case when a comment is posted it returns a new list of comments, so if the user is on the page for five minutes, if they post a comment, a comment posted 4 minutes ago will also show, this could be problematical, I’ll just have to see. The formSuccess function (also not shown), prepares #message to display a success message, as well as fades out the comment form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function validate(formData, jqForm, options) { 
    for (var i=0; i < formData.length; i++) { 
    	if (!formData[i].value) {
			$('#message').empty();
            $('#message').append("You can't submit a blank comment... sorry");
			$('#message').removeClass('success');
		    $('#message').addClass('error');
			$("#message").fadeIn(2000);
            return false; 
        } 
    }
	return true;
}
 
function formSuccess() {
	$('#message').empty();
	$('#message').removeClass('error');
	$('#message').addClass('success');
	$('#message').fadeIn('slow');
	$('#message').append("It worked... you can see your comment below, YAY");
	$('.addcomment').fadeOut('slow');
 
	$("#message").oneTime(8000, function() {
		$(this).fadeOut(4000);
	});
}

Above are the validate and success functions. Well I hope that was useful, now you know how to do ajax comments.

Note Ajax comments are not enabled on this blog, this is just a tutorial.