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
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • 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

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!