- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Refresh di una tabella con jquery
-
Refresh di una tabella con jquery
Ciao a tutti, è il mio primo post qui spero di non sbagliare sezione.
Dunque, sto cercando di imparare ad usare jquery con il php, seguendo alcuni tutorial sono riuscito a fare alcune cosema ora ho bisogno di una mano se possibile.
dunque: ho una pagina composta da un form con un campo solo e subito sotto una tabella con dei dati prelevati dal db mysql.
Se inserisco una voce con il form l'operazione va a buon fine e ricaricando la pagina (f5) vedo il risultato correttamente nella tabella.
Quello che vorrei è aggiornare la tabella dopo aver inciato il form.
ho fatto alcune prove con load (funzione di jquery) e in effetti funziona perchè senza ricaricare la pagina, mi viene visualizzata la tabella (senza stili... ma questo lo posso risolvere dopo).il problema è che la tabella che vedo appena arrivo sulla pagina permane perchè è caricata con un include nel file php... metto il codice per spiegarmi
Questa è la porzione di php che disegna la tabella, come vedete c'è un include.
[PHP]
echo "<table class='stripeMe'>
<th colspan='4'>"._MI_UMUS_LISTFORMAT."</th>
<tr class='head'><td>"._MI_UMUS_FORMAT_TITLE."</td><td width='150'>"._MI_UMUS_ACTION."</td></tr>";
echo "<div id='list'>";
include ('format.list.php');
echo "</div>";
echo "</table>";
[/PHP]Questo invece è il codice javascript che processa il form, una volta creato il formato ricarico il file format.list.php che disegna la mia tabella...
//creo un nuovo formato $(document).ready(function(){ $('form#submit').submit(function() { // we want to store the values from the form input box, then send via ajax below var fname = $('#fname').attr('value'); if (fname != "") { $.ajax({ type: 'post', url: 'format.php', data: 'fname='+ fname, success: function(){ $('div.success').fadeIn(1000); $('div.success').fadeOut(3000); $('div#list').load("format.list.php"); } }); } return false; }); });
quello che vorrei fare è non caricare la tabella con l'include ma farla caricare dal js in modo che poi possa essere aggiornata... credo che il problema sia qui ma potrei sbagliarmi non conoscendo bene javascript...
potreste darmi una mano?
Grazie
-
Allora, ho fatto un passo avanti, nel codice di prima ho aggiunto la riga
$('div.success').fadeIn(1000); $('div.success').fadeOut(3000); $('table#tablist').append("<tr><td>nome</td><td>azione</td></tr>");
che mi aggiunge alla tabella una riga con scritto nome e azione... ora devo sostituire questi due con i valori presi dal db....
come faccio?
-
Ciao,
per fare quello che dici tu puoi realizzare una funzione javascript che chiama una pagina sul tuo server che non fa altro che fare un echo dei dati. Un modo molto comodo di passare dati in maniera strutturata è json (che jquery e php supportano entrambi). Il supporto per json da php 5.2 è nativo mentre con le versioni precedenti è da integrare a parte tramite script gratuito). tra l'altro ti consiglio utilizzare questo metodo di jquery chè è molto + facile di $.ajax$.post('script.php',$('#form1').serialize(),function(data){ for(var i=0;i<data.length;i++){ $('#tabella').append('<tr><td>'+data.riga*.nome+'</td><td>'+data.riga*.valore+'</td></tr>'); } },'json'); ```Mentre in script.php avrai: [php] if($_POST){ // [...] validazione dei dati $risultato[]=array('riga'=>array('nome'=>'nome1','valore'=>'valore1')); $risultato[]=array('riga'=>array('nome'=>'nome2','valore'=>'valore2'); //nella pratica $risultato sarà popolata da un ciclio di lettura dal db [...] echo json_encode($risultato); } [/php]Se c'è qualcosa di non chiaro scrivi pure ;)