This morning I discovered that my websites were down again. That’s 3 times in the past two weeks that I’ve experienced service interruptions. I immediately emailed Dreamhost support about my “bad_httpd_conf” error. Ten hours later I received a phone call telling me that my service interruption was due to the fact that my plan had been switched to a more reliable server and the new DNS entries had not yet propagated. I didn’t buy it. Well an hour later I received an email stating that they discovered a configuration error on this new machine. Not good. Their only saving grace at this point is that they are friendly and respond pretty quickly to support requests. I came so close to switching to MediaTemple and their (dv) dedicated-virtual plan. But I know that MediaTemple has been having a lot of problems with their infrastructure as well. So I’m sticking with DreamHost for now. Hopefully this Dream will get better from this point on.
1 CommentMonthly Archive for April, 2007
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.