Form Element AJAX Spinner Attachment Using MooTools

By  on  

Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an AJAX request to grab the states but wont show any indicator to the user that something is happening. We're going to use MooTools to add an AJAX spinner image next to form fields that perform such AJAX requests.

The XHTML

<select class="ajax">
	<option value="">-- Select a Site--</option>
	<option value="David Walsh Blog">David Walsh Blog</option>
	<option value="Script & Style">Script & Style</option>
	<option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

Add the "ajax" class (or any class for that matter) to the elements you'd like the spinner to display by.

The MooTools JavaScript

window.addEvent('domready',function() {
	//inject image
	var spinner = new Element('img',{
		src: 'move-spinner.gif',
		styles: {
			position:'absolute'
		},
		opacity: 0
	}).inject(document.body);
	//form element events
	$$('.ajax').each(function(el) {
		//get coordinates
		var coords = el.getCoordinates(document.body);
		//ajax request object
		var request = new Request({
			url: '',
			method: 'post',
			onRequest: function() {
				spinner.setStyles({
					left: coords.right + 10,
					top: coords.top + 5
				}).fade('in');
			},
			onComplete: function() {
				spinner.fade('out');
			}
		});
		//change event
		el.addEvent('change',function() {
			//ajax request
			request.send({
				data: {
					ajax: 1,
					value: el.get('value')
				}
			});
		});
	});
});

We first add the spinner image to the document but hide it right away. When any of the form elements with the "ajax" class changes value, we move the spinner image to the right of the element. Then we use Reqeust's onRequest and onComplete methods to show and hide the spinner. Simple!

Look forward to a jQuery version tomorrow.

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Dynamically Load Stylesheets Using MooTools 1.2

    Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different.

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

  1. Cool little snippet here mate. Would mate a nice little class if it was taken further. You are part of the mooDev team arnt you? Isn’t there a spinner class in the new more version to be released soon? Will that do a similar thing?

  2. Good question Si. The doc for the new feature Spinner is here : http://mootools.net/docs/more/Interface/Spinner It automates the creation of ajax spinners over DOM elements being updated (previously known as Waiter on Clientcide.com). So your class is a bit useless, no ?

  3. @Nico: not useless no, maybe superseeded tho. Still, a nice little tut like this can help someone learn mootools and if you dont want to include mootools more then you can use it for your own purposes.

    I’m excited about trying out the spinner class tho and the table sort class (as i had just wrote my own)

  4. @Si: not to self, learn to type URLs properly!!

  5. great!!!!thanks man

  6. I think that AjaxLoader.js may be also useful to create simple AJAX spinners.
    http://musicvano.github.io/ajaxloader/
    This JavaScript library is easy to use, small and allows to modify properties of the spinner in real time.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!