Příloha prvku formuláře AJAX Spinner pomocí jQuery

Včera jsem vám ukázal, jak připojit AJAX spinner vedle prvku formuláře pomocí mých milovaných MooTools. Dnes vám ukážu, jak implementovat stejnou funkci pomocí jQuery.

Zobrazit ukázku

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

Naším cílem budou prvky s třídou CSS „ajax“.

JavaScript jQuery

$(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();
		});
	});
});

Vložíme obrázek spinneru do stránky a přemístíme jej podle toho, které pole provádí požadavek. Velmi jednoduché!

Zobrazit ukázku

Není JavaScript zábavný? Ach jo...a také to zlepšuje uživatelský dojem.