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.