Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - Richiesta notifiche ajax + mysql
Forum - Javascript - Richiesta notifiche ajax + mysql

Avatar
giocala88 (Normal User)
Expert


Messaggi: 248
Iscritto: 23/04/2008

Segnala al moderatore
Postato alle 14:26
Lunedì, 15/04/2013
Salve ragazzi, avrei la necessità di creare un sistema di aggiornamento notifiche stile Home di facebook. In altre parole vorrei che all'inserimento di un nuovo record in una tabella mysql tab1, questi venga stampato in un div e così via per gli n record il tutto in tempo reale. Qualche guida utile? Suggerimenti? Grazie

PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 18:58
Lunedì, 15/04/2013
Imporre al server di contattare il client per ogni nuovo record è una cosa da escludere a prescindere. Puoi pero fare il contrario, imposti una funzione temporizzata che ogni tot secondi contatta il server per ottenere i nuovi dati... Se sei nuovo delle interazioni mediante ajax fai riferimento a un framework come jquery che ti semplificherà non poco la vita.

PM Quote
Avatar
tasx (Dev Team)
Expert


Messaggi: 439
Iscritto: 15/12/2008

Segnala al moderatore
Postato alle 19:37
Lunedì, 15/04/2013

PM Quote
Avatar
giocala88 (Normal User)
Expert


Messaggi: 248
Iscritto: 23/04/2008

Segnala al moderatore
Postato alle 1:47
Mercoledì, 17/04/2013
Innanzitutto vi ringrazio tutti per le risposte.
In pratica ho buttato giù questo codice:

Codice sorgente - presumibilmente Javascript

  1. <html>
  2.         <head>
  3.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
  4.         <script type="text/javascript">
  5.      function toggle() {
  6.          if(document.getElementById('comm').style.display=='none') {
  7.              document.getElementById('comm').style.display='block';
  8.         } else {
  9.              document.getElementById('comm').style.display='block';
  10.          }
  11.     }
  12.  </script>
  13.                 <script>
  14.                         $(function() {
  15.                                 setInterval(function() {
  16.                                         $.ajax({
  17.                                                 type: "GET",
  18.                                                 url: "script.php",
  19.                                                 success: function(html) {
  20.                                                          // html is a string of all output of the server script.
  21.                                                         $("#element").html(html);
  22.                                            }
  23.  
  24.                                         });
  25.                                 }, 1000);
  26.                         });
  27.                 </script>
  28.         </head>
  29.        
  30.         <body>
  31.        
  32.                 <div id="element"></div>
  33.         </body>
  34. </html>



dove script.php
Codice sorgente - presumibilmente Javascript

  1. <?php
  2.  
  3.         $db_host = "localhost";
  4.         $db_user = "username";
  5.         $db_password = "";
  6.         $db_database = "test";
  7.  
  8.         $connessione=mysql_connect($db_host,$db_user,$db_password);
  9.         mysql_select_db($db_database,$connessione);
  10.        
  11.         $q = "SELECT * FROM tab_uno";
  12.        
  13.        
  14.         $sql = mysql_query($q) or die(mysql_error());
  15.        
  16.         while($r = mysql_fetch_array($sql)) {
  17.        
  18.                 echo '<a href="javascript:toggle();">'.$r['val']."</a> <br />";
  19.                 echo "<div id='comm' style='display: none'>".$r['id']."</div>";
  20.         }
  21.  
  22.  ?>



In pratica questo script funziona alla grande, ogni sec aggiorna il div #element con una nuova lettura query, quindi stampando eventuali nuovi records inseriti. Come si può notare ho implementato un apri/chiudi div comm. Il problema è che all'apertura del div questi si chiude non appena avviene il refresh e questo a me non sta bene perchè vorrei che restasse aperto e fosse l'utente a chiuderlo. Come posso implementare una logica del genere??? Grazie ancora

PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 15:00
Mercoledì, 17/04/2013
se lasci questo style='display: none' non credo otterrai tanti risultati, se ci fai vedere una pagina esempio, magari si può vedere come sistemarlo.

PM Quote
Avatar
giocala88 (Normal User)
Expert


Messaggi: 248
Iscritto: 23/04/2008

Segnala al moderatore
Postato alle 17:10
Mercoledì, 17/04/2013
Allora supponiamo di avere una tabella q_uno all'interno della quale sono presenti due campi id e val. I valori val sono stampati come link che aprono e/o chiudono, attraverso una chiamata rappresentata dalla funzione "function visualizza(id)"., il div in questione per un totoale di n div pari al numero dei valori estratti dalla query q_uno. A ciò si aggiunge la necessità di implementare una logica che possa aggiornare un div della pagina, dichiarata come index.php, con gli ultimi record inseriti.
Esempio: al momentoi della visita da partye di un utente della pagina index.php il sistema leggerà 10 records. Nel frattempo però è stato inserito un 11esimo record che senza refresh della pagina non verrà mai visualizzato all'utente. Una soluzione allora potrebbe essere quella di aggiornare un div che chiamo <div id="ultimo_record"></div>. In questo modo però ho la stampa dell'ultimo record ma non la possibilità di aprire e far rimanere aperto un secondo div, poichè questi viene chiuso non appena la chiamata ajax fa una richiesta alla pagina script.php, dove riesiede del codice per la lettura dell'utlimo records inserito.
La mia domanda è la seguente: "Esiste un modo per implementare una logica del genere, quindi risolvere il mio problema?"
Dopo ore di sbattimento sono riuscito a buttare giù questo codice (anche con l'aiuto di ricerche fatte sul web) che fa quello che vorrei io ma con il problema della stampa all'infinito. Posto il codice

index.php
Codice sorgente - presumibilmente Delphi

  1. <html>
  2.         <head>
  3.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
  4.                 <script type="text/javascript" language="javascript">
  5.                         function visualizza(id){
  6.                           if (document.getElementById){
  7.                                 if(document.getElementById(id).style.display == 'none'){
  8.                                   document.getElementById(id).style.display = 'block';
  9.                                 }else{
  10.                                   document.getElementById(id).style.display = 'none';
  11.                                 }
  12.                           }
  13.                         }
  14.                 </script>
  15.                 <script type="text/javascript">
  16.  
  17.                         var div;
  18.  
  19.                         $(document).ready(function(){
  20.  
  21.                                 div = $('#chatcontent');
  22.  
  23.                                 setInterval(updateMsg, 1000);
  24.                         });
  25.  
  26.                         function updateMsg() {
  27.  
  28.                                 $.ajax({
  29.                                         url: "script.php",
  30.                                         cache: false,
  31.                                        
  32.                                         success: function(html){
  33.  
  34.                                         $(div).append(html);
  35.  
  36.                                 }
  37.  
  38.                                 });
  39.  
  40.                         }
  41.                 </script>      
  42.         </head>
  43.        
  44.         <body>
  45.                
  46.                 <div id="chatcontent"> </div>
  47.                
  48.         </body>
  49. </html>



In pratica questo codice effettua una richiesta ogni tot sec ad una pagina script.php che stampa un elenco di record estratti dalla lettura query. Il problema è che stampa all'infinito. Come posso fare in modo che stampi tanti record quanti sono quelli estratti senza alcune ripetizioni?

Posto anche il codice script.php

Codice sorgente - presumibilmente Javascript

  1. <?php
  2.  
  3.         $db_host = "localhost";
  4.         $db_user = "username";
  5.         $db_password = "";
  6.         $db_database = "test";
  7.  
  8.         $connessione=mysql_connect($db_host,$db_user,$db_password);
  9.         mysql_select_db($db_database,$connessione);
  10.        
  11.         $q = "SELECT * FROM tab_uno";
  12.        
  13.        
  14.         $sql = mysql_query($q) or die(mysql_error());
  15.        
  16.         $num = mysql_num_rows($sql);
  17.         while($rows = mysql_fetch_array($sql)) {
  18.                         echo '<a href="#" onclick="visualizza(\''.$rows['id'].'\'); return false" >Ciao '.$rows['id'].'</a> <br />';
  19.                         echo "<div id='".$rows['id']."' style='display: none'>".$rows['val']."</div>";         
  20.                 }
  21.        
  22.        
  23.  ?>



Spero di essere stato chiaro anche perfché non saprei come altro spiegarmi. Ringranzio tutti quanti per l'attenzione e spero che insieme possiamo riuscire a risolvere questo problema del cavolo :-o. Grazie

Ultima modifica effettuata da giocala88 il 17/04/2013 alle 17:11
PM Quote