DOMANDA Risultato query mysql/php senza aggiornare pagina

[espanico]

Salve, ho realizzato uno script dove vado a inserire, tramite un form html dei dati in un database mysql, tramite php. Fin qui tutto ok, ora vorrei che nella stessa pagina dove inserisco i dati, quindi dove risiede il form html, sotto vengono elencati i dati appena inseriti senza dover aggiornare la pagina, tipo come accade twitter,facebook etc.
Al momento riesco a inviare i dati senza abbandonare la pagina ma non a visualizzare i nuovi dati. Ecco un esempio

Index.php

//FORM 
<form name="modulo"> 
    <p>Nome</p> 
    <p><input type="text" name="nome" id="nome"> 
    <p>Cognome</p> 
     <input type="text" name="cognome" id="cognome"> 
    <input type="button" id="bottone" value="Invia i dati"> 
</form> 

<div id="risultato"></div> 




// SCRIPT AJAX 

<script type="text/javascript"> 
$(document).ready(function() { 

  //al click sul bottone del form 
  $("#bottone").click(function(){ 

    //associo variabili 
    var nome = $("#nome").val(); 
    var cognome = $("#cognome").val(); 

  //chiamata ajax 
    $.ajax({ 

     //imposto il tipo di invio dati  
      type: "POST", 

      //Invio i dati alla pagina php 
      url: "salva.php", 

      //Dati da salvare 
      data: "nome=" + nome + "&cognome=" + cognome, 
      dataType: "html", 

      //visualizzazione errori/ok 
      success: function(msg) 
      { 
        $("#risultato").html(msg);  
      }, 
      error: function() 
      { 
        alert("Chiamata fallita, si prega di riprovare...");  
      } 
    }); 
  }); 
}); 
</script>

salva.php

<?php  
include("connessione_db.php"); 
include("config.php"); 
mysql_select_db("$db_name",$connessione); //seleziono il database e mi connetto  

$nome = $_POST['nome']; 
$cognome = $_POST['cognome'];  

$sql = "INSERT INTO tabella SET  
nome = '$nome', cognome = '$cognome', 
 if (@mysql_query($sql)) { echo '<p>Dati salvati correttamente</p>'; }  
else { echo '<p>Si e verificato un errore ' . mysql_error() .'</p>'; } 
?>

 

[cawletto]

E' molto semplice. Per farlo devi usare AJAX in quanto php da solo non può farlo dal momento che è un linguaggio server-side e, dunque, non "agisce" sul tuo pc.
Questa guida è proprio quello che fa per te: Submit A Form Without Page Refresh using jQuery | Nettuts+
Spero di esser stato utile :D

 

[espanico]

Ciao, il tutorial del tuo link fa gia quello che io so fare, e ho postato sopra. Il problema e visualizzare sotto a quel form i dati appena inviati, tipo come accade con i commenti dei blog o dei forum. Tipo io ho due campi nome - commento, appena una persona inserisce le informazioni e preme invio questi dati si devono subito vedere sotto senza aggiornare la pagina.

 

[cawletto]

Pardon, non avevo letto bene. Allora mi correggo, stavolta dovrebbe (:look:) servirti questo: Selezione Dinamica da Database con AJAX e PHP

Con l'articolo che ti ho dato prima (o il tuo metodo) inserisci le informazioni nel database e con questo estrai le informazioni dal database stampandole nella pagina! :)

 

[Juggernaut]

Per visualizzare i dati appena inseriti puoi usare lo stesso metodo che usi per gli errori, ovvero

$('#risultato').html('<p>Nome: '+nome+' - Cognome: '+cognome+'</p>');

 

[espanico]

Pardon, non avevo letto bene. Allora mi correggo, stavolta dovrebbe (:look:) servirti questo: Selezione Dinamica da Database con AJAX e PHP

Con l'articolo che ti ho dato prima (o il tuo metodo) inserisci le informazioni nel database e con questo estrai le informazioni dal database stampandole nella pagina! :)

Grazie per i link, anche se non fanno propriamente quello che io intendevo, comunque mi sono utili, e un altro argomento che cercavo ;)

Per visualizzare i dati appena inseriti puoi usare lo stesso metodo che usi per gli errori, ovvero

$('#risultato').html('<p>Nome: '+nome+' - Cognome: '+cognome+'</p>');

In questo modo visualizzo solo i dati appena inserito o anche i vecchi già presenti nel db? Io ho fatto una prova ma non so se e il metodo giusto, qui potete vedere l'esempio online. Link

In pratica metto estraggo i dati sia nella pagina salva.php e sia nella index.php in modo che se una persona visita per la prima volta gia visualizza i vecchi dati. Mentre se ne aggiunge altri li visualizza subito senza dover aggiornare la pagina. Diciamo che il risultato finale mi soddisfa, ma vorrei sapere se e un modo professionale.

Grazie.

 

[OpenKoob]

Io sono con Cawletto, attraverso una richiesta con AJAX/PHP puoi gestire in tempo reale, senza il refresh della pagina e con effetti grafici dinamici il tuo database. Anche il metodo di Juggernaut è funzionante ma macchinoso e poco amalgamabile a futuri aggiornamenti (p.e. è una rottura se successivamente vuoi aggiungere accanto ad ogni coppia nome/cognome una combobox per l'eliminazione di quel record).

EDIT: Chiedo scusa avevo letto male cosa diceva Juggernaut :muro: la scelta migliore è fare un misto: ad ogni "submit", in caso di success, (sto parlando del metodo ajax/php) fai la funzione $.html(), magari con un ciclo for per ogni coppia nome/cognome cosi strutturato:

[COLOR=#333333]per ogni utente {    
    var tempHtml = [/COLOR][COLOR=#333333]$('#risultato').html();
[/COLOR][COLOR=#333333]    tempHtml += [/COLOR][COLOR=#333333]'<p>Nome: '+nome+' - Cognome: '+cognome+'</p>';[/COLOR][COLOR=#333333]
    $('#risultato').html(tempHtml);
}
[/COLOR]

 

[Juggernaut]

Devi creare un altra funzione del jquery che si occupi di interrogare il server PHP ogni tot tempo. Il server si occupa soltanto di rispondere con il contenuto del database.

Per evitare sprechi, puoi inserire una variabile da passare al PHP che identifica il numero dell'ultima riga ovvero:

1) L'utente apre la pagina, i JS effettua la richiesta al PHP con ULTIMA_RIGA_RICEVUTA = 0, che risponde con l'intero contenuto della tabella
2) Dopo tot tempo il JS effettua di nuova la richiesta per avere aggiornamenti, inviando come dato al database l'ULTIMA_RIGA_RICEVUTA che contiene l'id dell'ultima riga ricevuta al passo 1.

 

[dr.pexquz]

per chiamate del genere io uso sempre la funzione load per postare i dati via jQuery (che è una scorciatoia alla chiamata ajax). Supponendo che salva.php sia nella root, per fare quello che ti serve ti basta usare il codice

$(document).ready(function() {
 $("#bottone").click(function() {
  $("#risultato").load("/salva.php", {
    "nome"   :  $("#nome").val(),
    "cognome"  :  $("#cognome").val()
  });
 });
});