Buongiorno a tutti, avrei la necessità di avere in un div informazioni sempre aggiornate.
Tali informazioni sono contentute in un file di testo dentro una pagina html.
Ho fatto un php che mi legge da file e mi mette le info dentro al div, però in questo modo l'utente ha le info aggiornate solo al refresh.
Posso fare in modo, con qualche script javascript (purtroppo in questosono proprio a zero), di mantenere aggiornato il contenuto della pagina?
Grazie
Importa una libreria di JS (mootools, jquery, prototype, etc, etc), ed usi AJAX per ottenere la pagina HTML con le info.
Un esempio con MooTools 1.2 (importa tutto il core e Request.Periodical del more )
Il limit serve perché se durante una richiesta non riesce a contattare il server, riprova dopo delay * 2 secondi, se non ci riesce ancora dopo delay * 3 secondi, se non ci riesce ancora dopo delay * 4 secondi, e così via. Limit indica il massimo che può arrivare, quindi le richieste non avranno mai più di 15 secondi di intervallo tra di loro.codice:var divId = "TheID"; //id del div che dovrà refreshare var pageLnk = "path/alla/pagina.html"; //Percorso per la pagina con l'HTML da introdurre window.addEvent('load', function(){ //Al caricamento della pagina new Request.HTML({ method: 'get', url: pageLnk, update: divId, initialDelay: 1000, //Fai il primo aggiornamento dopo un secodo ( 1 * 1000) delay: 5000, //Aggiorna ogni 5 secondi (5 * 1000) limit: 15000 //Massimo tempo di attesa tra una richiesta e l'altra 15 secondi (15 * 1000) }).startTimer(); });
I DON'T Double Click!
Quindi dovrei copiare le librerie che mi hai linkato nella directory, e poi inserire quel codice nella pagina giusto?
Grazie
Riepilogo: Creo la pagina php che legge il file di testo e mette il contenuto dentro al div della pagina stessa.
In questa pagina includo le due librerie che mi hai suggerito tu e quel codice javascript?
le librerie le devi mettere nella pagina dove si trova il div che verrà aggiornato, NON nel file che caricherai con AJAX.
I DON'T Double Click!
Io ho provato a scrivere questo, ma non mi funziona, dove ho sbagliato?
La se cambio il contentuto del file di testo non cambia nulla.codice:<html> <head> <title>mia pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="lib1.js" type="text/javascript"></script> <script src="lib2.js" type="text/javascript"></script> (le due lib che mi hai detto di scaricare) </head> <body style="filter: alpha(opacity=55); -moz-opacity: .55"> <script type="text/javascript"> var divId = "news"; //id del div che dovrà refreshare var pageLnk = "news.php"; //Percorso per la pagina con l'HTML da introdurre window.addEvent('load', function(){ //Al caricamento della pagina new Request.HTML({ method: 'get', url: pageLnk, update: divId, initialDelay: 1000, //Fai il primo aggiornamento dopo un secodo ( 1 * 1000) delay: 5000, //Aggiorna ogni 5 secondi (5 * 1000) limit: 15000 //Massimo tempo di attesa tra una richiesta e l'altra 15 secondi (15 * 1000) }).startTimer(); }); </script> <?php $name="miofile.txt"; if(file_exists($name)) { $f=fopen($name,"r"); $pointer=fread($f,filesize($name)); $string=nl2br($pointer); print("<div id='news' style='filter: alpha(opacity=55); -moz-opacity: .55; font: 11px verdana',sans-serif; text-align:left;'>"); print(" News ".date("h:i:s")."</p>"); print("$string"); print("</div>"); fclose($f); } exit; ?> </body> </html>
mmm posso consigliare?
codice:<?php $name="miofile.txt"; ?> <html> <head> <title>mia pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="lib1.js" type="text/javascript"></script> <script src="lib2.js" type="text/javascript"></script> (le due lib che mi hai detto di scaricare) </head> <body style="filter: alpha(opacity=55); -moz-opacity: .55"> <script type="text/javascript"> var divId = "news"; //id del div che dovrà refreshare var pageLnk = "<?php echo $name ?>"; //Percorso per la pagina con l'HTML da introdurre window.addEvent('load', function(){ //Al caricamento della pagina new Request.HTML({ method: 'get', url: pageLnk, update: divId, initialDelay: 1000, //Fai il primo aggiornamento dopo un secodo ( 1 * 1000) delay: 5000, //Aggiorna ogni 5 secondi (5 * 1000) limit: 15000 //Massimo tempo di attesa tra una richiesta e l'altra 15 secondi (15 * 1000) }).startTimer(); }); </script> <div style="filter: alpha(opacity=55); -moz-opacity: .55; font: 11px verdana, sans-serif; text-align:left;"> <?php echo " News <span id = \"DateStr\">".date("h:i:s")."</span></p><div id="news">"; if(file_exists($name)) { $f=fopen($name,"r"); $pointer=fread($f,filesize($name)); fclose($f); $string=nl2br($pointer); echo $string"; } echo "</div>"; ?> </div> </body> </html>
I DON'T Double Click!
Niente non funziona, e non riesco a capire il perchè!
Il mio obiettivo e fare in modo che nel div ci sia sempre il contentuto aggiornato del file di testo, in modo che appena viene aggiornato compaia nel div della pagina.
codice:<?php session_start(); header ("cache-control: no-cache, must-revalidate"); $name="miofile.txt"; ?> <html> <head> <title>mia pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="lib1.js" type="text/javascript"></script> <script src="lib2.js" type="text/javascript"></script> (le due lib che mi hai detto di scaricare) </head> <body style="filter: alpha(opacity=55); -moz-opacity: .55"> <script type="text/javascript"> var divId = "news"; //id del div che dovrà refreshare var pageLnk = "<?php echo $name ?>"; //Percorso per la pagina con l'HTML da introdurre window.addEvent('load', function(){ //Al caricamento della pagina new Request.HTML({ method: 'get', url: pageLnk, update: divId, initialDelay: 1000, //Fai il primo aggiornamento dopo un secodo ( 1 * 1000) delay: 5000, //Aggiorna ogni 5 secondi (5 * 1000) limit: 15000 //Massimo tempo di attesa tra una richiesta e l'altra 15 secondi (15 * 1000) }).startTimer(); }); </script> <div style="filter: alpha(opacity=55); -moz-opacity: .55; font: 11px verdana, sans-serif; text-align:left;"> <?php echo " News <span id ='DateStr'>".date("h:i:s")."</span></p><div id='news'>"; if(file_exists($name)) { $f=fopen($name,"r"); $pointer=fread($f,filesize($name)); fclose($f); $string=nl2br($pointer); echo $string; } echo "</div>"; ?> </div> </body> </html>
c'erano un paio di errorini...
in questa versione devi mettere anche il Date del More incluso
codice:<?php $name="miofile.txt"; ?> <html> <head> <title>mia pagina</title> <script src="lib1.js" type="text/javascript"></script> <script src="lib2.js" type="text/javascript"></script> <script src="mootools-1.2.4-core-yc.js" type="text/javascript"></script> <script src="mootools-1.2.4.2-more-yc.js" type="text/javascript"></script> </head> <body style="filter: alpha(opacity=55); -moz-opacity: .55"> <script type="text/javascript"> var divId = "news"; //id del div che dovrà refreshare var dateId = "DateStr"; var pageLnk = "<?php echo $name ?>"; //Percorso per la pagina con l'HTML da introdurre window.addEvent('load', function(){ //Al caricamento della pagina new Request.HTML({ method: 'get', url: pageLnk, initialDelay: 1000, //Fai il primo aggiornamento dopo un secodo ( 1 * 1000) delay: 3000, //Aggiorna ogni 5 secondi (5 * 1000) limit: 6000, //Massimo tempo di attesa tra una richiesta e l'altra 15 secondi (15 * 1000) onSuccess: function(tr, els, txt){ document.id(divId).set('html', txt); var d = new Date(); document.id(dateId).set('html', d.format("%H:%M:%S")); } }).startTimer(); }); </script> <div style="filter: alpha(opacity=55); -moz-opacity: .55; font: 11px verdana, sans-serif; text-align:left;"> <?php echo " News <span id = \"DateStr\">".date("h:i:s")."</span></p><div id=\"news\">"; if(file_exists($name)) { $f=fopen($name,"r"); $pointer=fread($f,filesize($name)); fclose($f); $string=nl2br($pointer); echo $string; } echo "</div>"; ?> </div> </body> </html>
I DON'T Double Click!
Copiato e incollato esattamente come dici tu, ma continua a non funzinoare.
Se cambio il contenuto del file di testo non si aggiorna il link..
Ho incluso le 3 librerie che mi hai detto:
- il core
- il periodical(more)
- il date(more)
Ti spiacerebbe spiegarmi che cosa fa questa pagina?
Io purtroppo di javascript non capisco molto!
può darsi che ci sia un problema di Path, il file miofile.txt è nella stessa directory? Puoi controllare se ci sono errori nella console degli errori di Firefox?
In ogni caso, se guardi il codice html risultante della pagina, noterai che hai il div contenitore, con al suo interno due elementi: un paragrafo con l'orario, con la data all'interno di uno span con id = "DateStr" ed un div con id="news".
Gli script che ti ho fatto importare definiscono delle classi javascript tra queste c'è Request.HTML.
Istanzio la classe (cioè genero un oggetto del tipo Request.HTML) all'interno della funzione che associo all'evento onload della pagina (quel window.addEvent("load", function(){}).
Poi, sullo stesso oggetto chiamo il metodo startTimer(), che sostanzialmente effettua periodicamente la chiamata AJAX al file che imposto come url nell'oggetto Request.HTML.
La funzione associata all'argomento onSuccess viene chiamata quando la richiesta ha esito positivo, passando come argomenti: il treeNode, l'array degli elementi, l'html risultate e l'XML risultante dal parsing della risposta del server. Data che è un testo semplice ho usato l'HTML risultante inserendolo come html del div con id="news". Successivamente ho creato un oggetto di tipo Date con la data attuale ed ho chiamato il metodo format(), che viene impostato dal Date di Mootools More, in modo da formattare la data nello stesso formato che tu hai usato nel PHP.
I DON'T Double Click!
Permessi di invio
Rispondi quotando