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
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    CSS Sprites

    The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are: Fewer images for the browser to download, which means...

  • By
    jQuery UI DatePicker:  Disable Specified Days

    One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...

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!