David Chiu

The title says it all. Using the AJAX library from Mootools I was able to AJAXify the comment forms in Movable Type. Mootools makes it easy by supplying a Send() method in the Ajax class. It’s almost as simple as doing this:

<script>
$(’myForm’).send()
</script>

The only problem is that we need to perform some validation on the comment form before we submit it. Normally, this is handled by MT. But since we want to send the contents of the form using AJAX, we will need to move the validation code to javascript - like this:

var submit=true;

with (commentForm) {
if (author.value.length<2) {
alert('Please enter your name');
submit=false;
}
if (email.value.length<5) {
alert('Please enter your email');
submit=false;
}
if (text.value.length<5) {
alert('Please enter a comment');
submit=false;
}

Finally, after all form fields are validated I wanted to add some fancy AJAX visual transitions:

var response=$(commentForm.id).send();
var animFadeOut = new Fx.Style($(commentForm.id), "opacity", {
duration: 500,
onComplete: function() {
var e = $(commentForm.id);
e.setHTML('Thank you for your comment.');
var animFadeIn = new Fx.Style(e, "opacity", {
duration: 500
});
animFadeIn.start(0, 1);
}
});
animFadeOut.start(1, 0);

Then viola! I now have a fancy AJAX comment form. The only thing missing at the moment is getting the “Preview” button working using AJAX. I’ll work on that for next time…

Go ahead and try out my Ajax comment form!

UPDATE: I’ve converted this blog to Wordpress and it’s using the K2 theme which already includes AJAX effects.