jQuery: refresh parziale degli elementi della pagina

Come possiamo ottenere un refresh parziale di una pagina, ossia il reload di un solo elemento? Con jQuery la procedura non è affatto complessa.

Possiamo definire il seguente plugin:

(function( $ ) {
	$.fn.refresh = function( options ) {
		options = $.extend({
			interval: 5000,
			className: "refresh",
			callback: function() {}
		}, options);
		
		return this.each(function() {
			var $element = $( this );
			$element.addClass( "refresh" );
			
			setInterval(function() {
				$element.load( location.href + " ." + options.className + "> *", "", options.callback );
			}, options.interval);
		});
	};

})( jQuery );

Ad intervalli regolari la pagina viene ricaricata utilizzando il metodo .load() che va ad eseguire del codice specifico sull'elemento selezionato. Esempio:

$(function() {
	$( "#test" ).refresh({
		callback: function() {
			console.log( "Refresh" );
		},
		interval: 3000
	});
});

In questo caso ogni tre secondi abbiamo il refresh dell'elemento ed un messaggio alla console JavaScript.