Visualizzare dati db senza aggiornare pagina

[sixdas]

Salve, vorrei un vostro aiuto, in pratica vorrei capire come fare per salvare dei dati in un db e poi visualizzarli nella stessa pagina, senza doverla aggiornare. Al momento riesco solo a salvarli, ma non a visualizzarli. Vi metto un esempio di come salvo i dati:

//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>'; } ?>

Ora, nella pagina index, sotto il form, vorrei anche una tabella con tutti i dati gia inseriti, e vorrei che quando l'utente inserire i suoi dati, dopo gli compaiono sotto senza dover aggiornare la pagina. Come fare?

 

[criric]

Ciao,
nella pagina del form ti manca il collegamento alla libreria Jquery

<script src="http://code.jquery.com/jquery-latest.js"></script>

nella pagina salva.php c'era un errrore di sintassi
codice corretto

<?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>';
}
?>

per visualizzare i dati ti basta fare una SELECT dopo la INSERT nella pagina salva.php ed elencare i risultati

 

[sixdas]

Ciao, il codice che ho postato sopra era incompleto, era solo per far capire cosa faccio. Infatti il file salva, e un po diverso ci sono i vari controlli etc...

Io ho inserito la select al posto di.

echo '<p>Dati salvati correttamente</p>';

E funziona come vorrei, ma ci sono due cose, se l'utente visita la pagina senza inserire nulla non vede i dati già presenti, inoltre se lui inserisce i dati vede anche quelli precedente, ma se aggiorna la pagina scopare tutto. non so se ho reso l'idea, qui ho messo online lo script per fare una prova...link

 

[criric]

non metterla nella IF la SELECT

mettila in fondo cosi verra eseguita sempre

 

[sixdas]

Fatto, ma il risultato non cambia,
Ti posto tutto il file salva.php

<?php
include_once ('config.php');

// Variabili Globali
	$date = (date("d/m/Y H:i"));


// Query MySql di Inserimento
	// recupero i campi di tipo "stringa"
	$nome       = trim($_POST['nome']);
	$cognome    = trim($_POST['cognome']);
	$nota       = trim($_POST['nota']);

	// verifico se devo eliminare gli slash inseriti automaticamente da PHP
	if(get_magic_quotes_gpc())
	{
		$nome       = stripslashes($nome);
		$cognome    = stripslashes($cognome);
		$nota       = stripslashes($nota);
	}

	$nome    	 = mysql_real_escape_string($nome);
	$cognome     = mysql_real_escape_string($cognome);
	$nota		 = mysql_real_escape_string($nota);

$sql = "INSERT INTO test (nome, cognome, nota, data) VALUES('$nome','$cognome','$nota','$date')";

// controllo l'esito
if (mysql_query($sql)) {
echo '<p>Dati salvati correttamente</p>';
} else {
    echo '<p>Si e verificato un errore ' . mysql_error() . '</p>';
}

$ricevuta = mysql_query("SELECT * FROM test ");

while ($row = mysql_fetch_assoc($ricevuta)) {
	echo $row['nome'] ,'&nbsp;-&nbsp;', $row['cognome'] ,'&nbsp;-&nbsp;', $row['nota'] , "<br>";
}
?>

 

[criric]

visita la pagina senza inserire nulla non vede i dati già presenti

questo mi sembra risolto, a parte che inserisci i campi vuoti e dovresti cercare di evitarlo

ma se aggiorna la pagina scopare tutto

perche la chiamata ajax l'hai messa sul click del bottone

$("#bottone").click(function(){

mi sembra giusto cosi

 

[sixdas]

questo mi sembra risolto, a parte che inserisci i campi vuoti e dovresti cercare di evitarlo

No, io vorrei che appena si apra la pagina, gia visualizzo i dati presenti, poi se inserisco altri li visualizza insieme a gli altri senza aggiornare. Per i campi nulli, infatti non ci avevo pensato adesso sistemo.

perche la chiamata ajax l'hai messa sul click del bottone

$("#bottone").click(function(){

mi sembra giusto cosi

E come faccio ad evitarlo?

 

[criric]

E come faccio ad evitarlo?

prova a toglierlo

<script type="text/javascript"> 
    $(document).ready(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>

 

[sixdas]

prova a toglierlo

<script type="text/javascript"> 
    $(document).ready(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>

Non va, appena apro la pagina mi da l'errore dei campi vuoti.

Forse e proprio come ho strutturato lo script che non va bene? purtroppo sto iniziando adesso con ajax

 

[criric]

allora puoi provare cosi:

rimetti l'onclick

e fai una query anche nella prima pagina e mostri il risultato nel div della chiamata ajax

<div id="risultato">
<?php
// fai la select e mostra il risultato
?>
</div>

dopo la chiamata ajax verrà sovrascritto con i nuovi dati

 

[sixdas]

allora puoi provare cosi:

rimetti l'onclick

e fai una query anche nella prima pagina e mostri il risultato nel div della chiamata ajax

<div id="risultato">
<?php
// fai la select e mostra il risultato
?>
</div>

dopo la chiamata ajax verrà sovrascritto con i nuovi dati

Ok grazie, adesso funziona come dovrebbe