- bisogna identificare, nel <body>, l'elemento di cui si vuole fare il refresh mettendo nel suo tag un id:
<div id="id_refresh"></div>
- uno script JavaScript con funzionalità avanzate di jQuery, definito nel <head>, identifica tale elemento con l'id di cui sopra e fa azioni su di esso ogni X secondi.
var refreshId = setInterval(function() {
$("#id_refresh").fadeOut("fast").load("refresh.php").fadeIn("slow");
}, 2000);
$("#id_refresh").fadeOut("fast").load("refresh.php").fadeIn("slow");
}, 2000);
In questo caso, le azioni fatte ogni 2000 millisecondi sull'elemento html sono: prima il fadeOut, poi il caricamento dell'output del PHP refresh.php, e infine il fadeIn.
Di seguito, il codice completo, dove si noti che è necessario caricare dal repository di Google la libreria jquery.min.js:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id_refresh").fadeOut("fast").load("refresh.php").fadeIn("slow");
var refreshId = setInterval(function() {
$("#id_refresh").fadeOut("fast").load("refresh.php").fadeIn("slow");
}, 2000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="id_refresh">
</div>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id_refresh").fadeOut("fast").load("refresh.php").fadeIn("slow");
var refreshId = setInterval(function() {
$("#id_refresh").fadeOut("fast").load("refresh.php").fadeIn("slow");
}, 2000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="id_refresh">
</div>
</body>
</html>
Si noti la linea $.ajaxSetup({ cache: false });. Con questa linea lo script fa il load del refresh.php specificando la variabile CGI _ con un valore sempre diverso per ogni chiamata fatta ogni 2000 millisecondi.
refresh.php?_=012345678
refresh.php?_=012345679
...
refresh.php?_=012345679
...
Questo permette di evitare effetti indesiderati scaturiti dal fatto che il browser potrebbe usare il risultato delle precedenti chiamate fatte al refresh.php che ha salvato precedentemente nella sua cache.
Nessun commento:
Posta un commento