Refresh automatico parziale

Refresh automatico parziale postato il 02/04/2015 17:19:29 nel forum programmazione, open source e hosting

Salve a tutti. Sono qui oggi per chiedervi una mano su un pezzo di codice che non riesco a sistemare. Il codice in questione è il seguente:

var time = new Date().getTime();
$(document.body).bind("mousemove keypress", function(e) {
time = new Date().getTime();
});

function refresh() {
if(new Date().getTime() - time >= 60000)
window.location.reload(true);
else
setTimeout(refresh, 10000);
}

setTimeout(refresh, 10000);

1) In teoria il codice dovrebbe aggiornare automaticamente la pagina ogni minuto a meno che non venga mosso il mouse (mousemove) o non vengano digitati caratteri in un input text o in un textarea (keypress). Ciononostante, sia che venga mosso il mouse sia che io scriva qualcosa in un input text o un textarea, ogni minuto viene aggiornata la pagina. Come mai? Dove sbaglio?

2) Supponendo di aver risolto il problema nel punto precedente, si pone il problema di fare una modifica al codice ma non riesco a capire come farla. Il problema di questo codice è che aggiornando la pagina cancella anche il testo che stavo scrivendo e questo è assai frustrante. Quello che vorrei fare io è fargli fare un refresh parziale, ossia fargli aggiornare tutta la pagina tranne gli input text, i textarea, gli input checkbox etc.. In poche parole, se A scrive in chat e la invia e B sta ancora scrivendo, la chat deve aggiornarsi facendo comparire la scritta di A senza che nell'input text di B venga cancellato ciò che ha scritto fino a quel momento; se vi è un nuovo visitatore nella pagina deve comparire il suo nome senza che nulla venga cancellato, e così via. Vorrei in sostanza che venisse aggiornata tutta la pagina lasciando inalterato il contenuto delle textarea e degli input. Ma non so come implementarlo nel codice. Potreste aiutarmi?


Grazie mille in anticipo.

02/04/2015 18:05:01

A mio parere il problema qui non è il codice, ma l'idea che ci sta dietro. Quello che vuoi fare non è fattibile.

Perchè mai vorresti aggiornare la pagina ogni minuto?

02/04/2015 20:27:21

L'idea non è mia. Quello che vorrei fare io è far si che si aggiorni in caso di novità solo la parte desiderata. Per fare un esempio consideriamo un pbc: se ti trovi in chat e intanto scrivi la tua azione vorrei che si aggiornasse la chat senza che ti venga cancellato il contenuto dell'input text che hai scritto fino a quel momento. Se si connette un utente mentre scrivi vorrei che non si cancellasse quello che stai scrivendo e che contemporaneamente si aggiorni il div che contiene l'elenco dei presenti.
In poche parole vorrei che si aggiornasse esclusivamente il div il cui contenuto subisce una modifica senza che tu rischi di perdere quel che hai fatto fino a quel momento.
Ho creato il codice per aggiornare ogni minuto perché questo è un consiglio che ho trovato su un forum girando online mentre cercavo un modo per fare quello che vorrei fare io.

02/04/2015 23:36:08

per fare quello che vuoi tu ci sono due o tre soluzioni che vengono usate principalmente che mi vengono in mente.

- Puoi far refreshare esclusivamente il div con i dati che ti interessano usando ajax (qui ti vengono in aiuto molte librerie che semplicizzano la cosa, prima fra tutte jquery con il .load() o le altre funzioni per l'ajax)

- Puoi usare un iframe nel div che devi refreshare (gli iframe sono supportati anche in html 5 per cui non è un tag deprecato, anche se non è il massimo come cosa)

03/04/2015 00:03:59 e modificato da gdr-online.com il 04/06/2019 09:41:27

Avevo già pensato a queste soluzione ma non funziona nessuna delle due e non sono riuscito a capire il perché. Il mio div da aggiornare è il seguente:

<div id="visualizza">
<?php include('visualizza.inc.php'); ?></div>

la pagina visualizza.inc.php contiene esclusivamente codice per richiamare dal database i dati da visualizzare e il codice

echo $text;

per visualizzare il testo.
Usando un iframe al posto dell'include, ossia scrivento

<div id="visualizza">
<iframe="visualizza.inc.php"></iframe></div>

non mi visualizza nulla. Penso sia dovuto al fatto che la pagina contiene solo codice php, ma essendoci il comando "echo $text" non capisco perché non visualizza il testo.
Usando l'altro metodo avevo creato questo codice:

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$("#visualizza").load("visualizza.inc.php");
}

setInterval('autoRefresh_div()', 5000);
</script>

e messo nella stessa pagina in cui si trova il div da aggiornare, ma non ha mai funzionato.

03/04/2015 14:48:39 e modificato da gdr-online.com il 04/06/2019 09:41:07

A scopo didattico è sempre tutto ben accetto, anche perché mi son accorto che faccio errori stupidi a volte. Comunque ora funziona tutto tranne per un fatto: non mi visualizza la pagina. Mi sa che il problema sta nella pagina visualizza.inc.php ora, perché se la richiamo così

<div id="visualizza"> <?php include('visualizza.inc.php'); ?> </div>

si vede benissimo, ma appena la richiamo con il jquery non la visualizza più. La pagina visualizza.inc.php contiene solamente il seguente codice:

<?php
$query=mysql_query(/** codice di richiamo dei dati dal db **/);
while($record=mysql_fetch_array($query)){
/** codice di definizione di alcune variabili (tra cui la variabile $testo) **/
echo $testo;
} ?>

Richiamata nel div "visualizza" con l'include si vede tutto, invece richiamata con il codice dopo il refresh non si vede nulla. Se fuori dal codice php ci aggiungo un AA nel seguente modo:

<?php
$query=mysql_query(/** codice di richiamo dei dati dal db **/);
while($record=mysql_fetch_array($query)){
/** codice di definizione di alcune variabili (tra cui la variabile $testo) **/
echo $testo;
} ?>
AA

allora dopo il refresh con jquery mi visualizza solo il AA. Ma a me serve che mi visualizzi la parte con il php.

03/04/2015 15:28:32

Il problema sta nel fatto che quando chiami la pagina con include() in php hai già tutta l'infrastruttura del gdr impostata, incluso il setup della connessione al database.
Quando invece chiami la stessa pagina con javascript tutta la parte di setup manca e ovviamente la chiamata mysql_query() fallisce.

A puro scopo didattico:

Ad ogni modo, non capisco perché in javascript sono tutti fissati con il creare funzioni che richiamano subito dopo...

Semplicemente perchè è più leggibile. Non è bello, e a volte non è neanche facile, leggere mille cose innestate una dentro l'altra.


La sintassi proposta da astro mettendo il codice da richiamare tra apici in setTimeout() è corretta, forse non è il meglio dello stile, ma funziona.
Il codice sbagliato invece è quello proposto in alternativa da spyker:

<script>

setInterval(autoRefresh_div(), 5000);
</script>

Questo è sbagliato (sintatticamente funziona, ma a livello di logica no), perchè la funzione autoRefresh_div in questo caso viene chiamata ed eseguita prima di chiamare la setInterval (non dopo 5 secondi). setInterval riceverebbe come primo parametro il valore di ritorno della funzione autoRefresh_div (cioè nulla) e dopo 5 secondi andrebbe in errore.

La versione corretta del passaggio di una funzione come parametro è questa:

<script>

setInterval(autoRefresh_div, 5000);
</script>

Le callback si passano senza le parentesi tonde. Se si mettono le tonde le funzioni vengono eseguite nel punto in cui sono scritte, non vengono passate come parametri.

03/04/2015 17:18:05

Non si finisce mai di imparare. :-D
Ora però mi sorge un altro problema: se levo l'include() dal div non visualizza nulla finché non viene fatto l'aggiornamento con il jquery. Inoltre, anche dopo il refresh con il jquery, non mi visualizza il codice php della pagina visualizza.inc.php ma solo il AA che ho aggiungo io dopo. A me servirebbe che la pagina sia sempre visualizzata nel div e che con il jquery venga aggiornata. Quindi ora i problemi sono:
1) come includo la visualizzazione della pagina visualizza.inc.php senza usare include()?
2) come mai, nonostante non vi sia l'include() nel div, non mi viene visualizzato il php della pagina visualizza.inc.php?