Form Element AJAX Spinner Attachment Using jQuery

By  on  

Yesterday I showed you how to attach an AJAX spinner next to a form element using my beloved MooTools. Today I'll show you how to implement that same functionality using jQuery.

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" />

Elements with the "ajax" CSS class will be our target.

The jQuery JavaScript

$(document).ready(function() {
	//create image
	$('<img src="move-spinner.gif" id="spinner" />').css('position','absolute').hide().appendTo('body');
	//for every field change
	$('.ajax').change(function() {
		//get element position
		var position = $(this).offset();
		//position image
		$('#spinner').css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn();
		//ajax
		$.post('<?php echo $_SERVER['REQUEST_URI']; ?>',{
			ajax:1,
			value: $(this).val()
		},function() {
			$('#spinner').fadeOut();
		});
	});
});

We inject the spinner image into the page and reposition it depending on which field is doing the request. Very simple!

Isn't JavaScript fun? Oh yeah...and it makes the user experience better too.

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    CSS Vertical Centering

    Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

Discussion

  1. Ben

    Sweet! Thanks David!

  2. great job!.. how to implement it with asp.net?

    thanks

  3. Have you given any thoughts to Select Dropdowns, MooTools, and CSS Print? I’ve been hard pressed to find good resources, and judging from this article I’m guessing you may have something valuable to say. Thanks in advance!

  4. Very interesting list. It’s a great addon to what I’m already doing. Thanks.

  5. thanks, i have a question for u !
    i want to used AJAX load JSON cross orther domain ! has the solution for that ?

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