Proper MooTools Ajax Requests

If you read this you are probably aware that I use Ajax (allows a page to load new content without reloading the page) alot. I really like it. It allows me to control my users experience, and doesn’t require flash. It, if done properly, also degrades nicely. Meaning, if the browser does not support it, the user can still proceed to seeing the content. Just not exactly the same way. (often just navigates to the content, and leaves the current page behind).

Because I love it so much, and I see most people using it incorrectly, I want to go over the correct way.

First of all, everything you are doing in MooTools should be between this. The reasoning is that, this waits for the DOM (Document object model… basically the HTML structure) to be completely loaded and ready.

Anything that fires before this would risk not working properly.

window.addEvent('domready', function(){

});

Now we are going to make an instance of the Request class (ajax)

window.addEvent('domready', function(){
	var ajax = new Request();
});

This is actually most often where people go wrong. A lot of people think that this should go inside of a click event listener or something like that… EG

THIS IS WRONG!!!!!!!!!

window.addEvent('domready', function(){

	$( 'elementID' ).addEvent('click', function(e) {
		var ajax = new Request();

	});		

});

The reason it is wrong is because this creates a new Request instance every time elementID is clicked. Basically that is like buying a new car every time you want to go to the grocery store. Not only that, but you dont even get rid of the previous cars. What you want to do is get one car, and drive it where ever you want to go.

So in full what you want to do is something like this

window.addEvent('domready', function(){

	var ajax = new Request({
		url: 'fileToRequest.php';
		onRequest: function(txt){
			$('toLoad').set('html', 'Loading...');
		},	

		onSuccess: function(txt){
			$('toLoad').set('html', txt);
		}

	});	

	$( 'elementID' ).addEvent('click', function(e) {
		ajax.send();
	});		

});	

And… If you want to drive the care somewhere else, you can so this.

		ajax.setOptions({"url": 'NewPlace.php'});
		ajax.send();

So make one car, dive it where ever you need.

Note, there are times when you need multi cars, like if you need to pick up info from multi places at the same time, or you need different types of cars.

unobtrusive spam bot fixing?

==NOTE: Nothing here will work copy pasted, the quotes are all messed up==
Im not sure if this would work as I dont know how man, if any, spam bots use javaScript. But if very few of them do, then this should be a very simple solution to drastically reduce form submitted spam, WITHOUT your users needing to type in those damn captua things. 

Using mootools, you can so very easily target parts of HTML elements. So lets take a look at how we could use this to fix this issue.

Lets say you have the following form

<form id=”myForm” action=”rightPlace.php” method=”post”>
<input type=”name” name=”firstName” />
<input type=”name” name=”lastName” />
<input type=”submit” name=”submit” value=”submit” />
</form>

The spam bot can easily fill out this out, and because the form has the action info, it knows where to send it to etc.

So now say you changed it to this:
<form id=”myForm” action=”wrongPlace.php” method=”post”>
<input type=”name” name=”firstName” />
<input type=”name” name=”lastName” />
<input type=”submit” name=”submit” value=”submit” />
</form>

We then capture everything going to wrongPlace.php, so we can see what was spammed (I love it, just not on my site).

In mootools we include some javaScript in the pages head that is something like this (remember to fire only after the DOM is ready).

$(’myForm’).set(’action’, ‘rightPlace.php’);

Now, in javaScript we just changed where the form posts to (from wrongPlace.php to rightPlace.php), and everything works.

But what about your non javaScript people out there. Well, if you must… Just have wrongPlace.php require a challenge question before doing what you wanted it to do, and everyone is happy. Your non javascript spam bots dont know what’s up, and 95% of your users dont have any extra steps to prove they are human.

If you dont use mootools, or cant target the action of a forum, just use a hidden input like so
<input id=”challenge”  type=”hidden” name=”challenge” value=”wrong” />

then pure js (been a while) should be something like getElementById(’challenge’).value=’correct’;

Look ma, no flash!

So, as I promised, I made a copy of my new flickr image viewer I just made for my brother. It looks a ton better with lots of photos and tags. The tags line up in columns when there is enough of them. 

Private Flickr Image Viewer

After looking at it, you may think I got a little crazy with the animation, but I think it added a feeling of interactivity when you are waiting for the AJAX call to load. That and I wanted to try out some stuff I may be using on some new projects.

I have to say, I love Mootools, but I really wish there was a better was of chaining actions. Do this, then that, but only after the first one ends. You can do it easily with animations, but only with the same instance of a class, and only animations. What If I want to fade out, then remove/replace content in an HTML element, then fade back in. Maybe im missing something… but it looks like there is no simple way to do this.

And just because I said I would… Tellart <– Take that google reader!