Aggiornamento tabella

[Alextn]

Ciao a tutti e grazie in anticipo per l'aiuto.
Sto cercando di avvicinarmi ad Ajax quindi premetto la mia poca preparazione.

Ecco il problema: ho una tabella con dei valori estratti da un db Mysql attraverso un ciclo while. Ho creato 2 tasti per incrementare un valore di 1 unità. Ho trovato uno script Ajax che ho adattato alle mie esigenze ma in origine era stato creato per eliminare una row e non per un upgrade.

Ho collegato questo script alla pagina 'insert_flag_penalita.php' che attualmente si occupa di fare una insert su un database mysql. Ora tutto funziona correttamente ma come ben si vede, lo script era stato progettato per fare un delete non un upgrade. Al momento quindi se premo il tasto assegnato, la riga scompare, poi aggiorno la pagina e vedo il valore cambiato. Quello che vorrei ottenere è appunto l'aggiornamento della tabella e non l'eliminazione della riga e vorrei anche togliere l'allert che non mi interessa.

Ecco lo script:

$(document).ready(function(){


    // Delete 
    $('.delete').click(function(){
        var el = this;


        // Delete id
        var id = $(this).data('id');
        
        var confirmalert = confirm("Are you sure?");
        if (confirmalert == true) {
            // AJAX Request
            $.ajax({
                url: 'insert_flag_penalita.php',
                type: 'POST',
                data: { id:id },
                success: function(response){
    
                    if(response == 1){
                        // Remove row from HTML Table
                        $(el).closest('tr').css('background','tomato');
                        $(el).closest('tr').fadeOut(800,function(){
                            $(this).remove();
                        });
                    }else{
                        alert('Invalid ID.');
                    }
                }
            });
        }
    });
});

[KillerWorm]

Ciao, puoi agire in vari modi ma dipende dal contesto e da come vuoi che sia organizzato il sistema.

A grandi linee, una volta ricevuta risposta positiva dal server, puoi:

A - agire via JavaScript/jQuery su quel particolare elemento (se questo è identificabile via script) per incrementarne il valore direttamente usando un apposito metodo, ad esempio l'operatore ++. Puoi fare una cosa del genere:

document.querySelector('#tuo_elemento').innerHTML++;

.
B - usare il metodo load() di jQuery applicato su quel particolare elemento (se questo è identificabile via script) e specificando come parametro nell'url il selettore che identifica l'elemento stesso in modo che solo questo elemento sia ricaricato nella pagina:

$('#tuo_elemento').load(document.URL + ' #tuo_elemento');

.
C - usare il metodo load() di jQuery applicato all'intera tabella e specificando come parametro nell'url il selettore che identifica la tabella stessa in modo che l'intera tabella sia ricaricata e quindi rigenerata nella pagina:

$('#tua_tabella').load(document.URL + ' #tua_tabella');

.
Ognuna di queste soluzioni può presentare dei pro e dei contro in base a come è strutturata la pagina e l'intero progetto. Per consigliarti in maniera mirata è necessario vedere la pagina in azione, se possibile; in alternativa potrebbe essere sufficiente capire come è strutturata la tabella, a livello di HTML.

Posta eventualmente il link alla pagina oppure un esempio della stessa, oppure la parte di codice HTML relativo alla tabella, così da avere più chiaro il contesto.

vorrei anche togliere l'allert che non mi interessa

Ti riferisci all'alert dentro il success della chiamata AJAX (che è necessario a segnalare una risposta negativa, da quel che capisco), oppure al confirm prima di effettuare la chiamata?

Fai sapere.

[Alextn]

Grazie per la risposta, allora cerco di spiegare..


La pagina upload_tempi.php si occupa di creare la tabella rilevando i dati dal database tramite ciclo While.
In questa pagina tra le varie azioni, creo i due bottoni + e - (riga 445), richiamo lo script ajax che sta nella pagina script_ajax.js
La pagina insert_flag_penalita.php si occupa invece di fare le operazioni di delete ed insert dei dati che arrivano.


Attualmente funziona tutto, solo che come noterai allo script ajax, ho dovuto aggiungere " window.location.reload(); " per fare in modo che la pagina upload_tempi.php si aggiornasse dopo l'operazione di insert o delete della pagina "insert_flag_penalita.php".


Ecco questo è il mio problema, vorrei che la pagina si aggiornasse automaticamente senza refresh dopo l'azione della pagina insert_flag_penalita.php. Vorrei quindi vedere il nuovo valore in tabella.

Scusa la confusione del codice ma sto facendo prove.

Ti allego i file

[KillerWorm]

Ho visto, hai applicato un id al <table> così come ai <tr>, per cui in teoria qualsiasi soluzione che ho proposto può andare bene.
Per andare sul sicuro, anche per altre eventuali situazioni in cui devi manipolare i dati dentro la tabella e ti serve aggiornare la tabella, puoi usare la soluzione C.

Ho visto che il <table> ha id "example"; magari sarà meglio usare un nome più consono, ti consiglio in seguito di cambiarlo ma per ora usiamo questo.

Prova quindi a sostituire il tuo

window.location.reload();

con:

$('#example').load(document.URL + ' #example');

.
Ho visto che hai lasciato il fadeOut() per il tr, ma questo in teoria non ti serve. Quindi nella condizione, dentro il success, puoi lasciare solo il load(), in questo modo:

if(response == 1){
   $('#example').load(document.URL + ' #example');
}else{
   alert('Invalid ID.');
}

.
Prova e fai sapere.

In sostanza Il metodo load() jQuery è una chiamata AJAX semplificata. Dietro le quindi viene eseguita la chiamata AJAX che legge l'intera pagina (una volta che questa è stata appunto aggiornata dalla tua precedente azione), quindi, attraverso il parametro specificato nell'URL (cioè il selettore #example agganciato all'URL) viene estrapolato solo il contenuto di tale elemento e riversato dentro l'elemento a cui è stato applicato il metodo load(), cioè dentro $('#example'), quindi la tabella stessa nell'attuale pagina.

Scusa la confusione del codice ma sto facendo prove.

A parte le prove, il codice può essere sicuramente ottimizzato.

Ad esempio, questa riga l'hai ripetuta diverse volte nel codice:

<td <?php if($id_pilota % 2 == 0){?>style="background-color:#FFFFE0;"<?php } else {?>style="background-color:#F0FFFF;"<?php } ?>><?php echo ... ?></td>

Se l'intento è quello di creare uno sfondo alternato per le righe della tabella (il cosidetto "effetto zebra"), puoi agire direttamente da CSS usando giusto qualche regola, anziché "sporcare" il sorgente con codice ridondante.

Vedi esempi:
Even and odd rules
Striped Table
How to set alternate table row color using CSS?
e altri zebra striped table css su google

[Alextn]

Grazie ancora per la risposta, ho seguito il tuo consiglio sostituendo il reload con la riga

$('#example').load(document.URL + ' #example');

ma l'aggiornamento della tabella avviene solo al primo klick, successivamente sembra bloccato lo script.
Ricarico la pagina, torna a funzionare solo la prima volta e poi si blocca nuovamente

$(document).ready(function(){


    // Delete 
    $('.delete').click(function(){
        var el = this;


        // Delete id
        var id = $(this).data('id');
        
      
        //if (confirmalert == true) {
            // AJAX Request
            $.ajax({
                url: 'insert_flag_penalita.php',
                type: 'POST',
                data: { id:id },
                success: function(response){
    
                    if(response == 1){
                        // Remove row from HTML Table
                    
                        $(el).closest('tr').fadeOut(300,function(){
                           //window.location.reload();
                           $('#example').load(document.URL + ' #example'); 
                        });
                    }else{
                        alert('Invalid ID.');
                    }
                }
            });
        }
   );
});

[KillerWorm]

Giusto, i pulsanti delete vengono creati nella tabella. Con $('.delete').click(...) stai associando un gestore di evento direttamente sui singoli pulsanti per cui, nel momento in cui la tabella viene rigenerata, queste associazioni vengono perse.

Una soluzione può essere ciò che tecnicamente viene definito "Event delegation". Si tratta quindi di delegare un elemento di cui si ha sicurezza che non venga "distrutto", in modo che l'associazione dell'evento click possa essere ripristinata (diciamo così) in modo dinamico, dopo che gli elementi vengono rigenerati.

Più facile farlo che spiegarlo.

Puoi quindi modificare l'applicazione dell'evento click in questo modo:

$('#example').on('click', '.delete', function(){

Non ho provato, fai sapere se funziona.

[Alextn]

Certo che si, grazie mille.

[Alextn]

Continua a darmi " invalid id" non capisco cosa sto sbagliando..

<table id="example" class="table table-bordered table-striped" >
    <thead>
     <tr>


      <th>Pilota</th>
      <th>Tempo imposto</th>
      <th>Tempo rilevato</th>
      
      
<?php     
$query_pen = "SELECT * FROM penalita WHERE id_evento='$id_evento' AND nome_penalita <> 'No-time' ORDER BY id"; ///echo $query_pen;
$result_pen = mysqli_query($conn, $query_pen) or die(mysqli_error($conn));
$n_pen = $result_pen->num_rows;


if(@$result_pen->num_rows > 0)
{ while($row_pen = $result_pen->fetch_array(MYSQLI_ASSOC))
  {    
  
$id_pilota=$row['id_pilota'];
$id_penalita=$row_pen['id'];


 
?>  


<th><div class="penalita"><?php echo $row_pen["nome_penalita"]."=<br>".$row_pen["valore_penalita"]."punti<br/>";?></div></th>




<?php


}}
  
?>
 <th><div class="penalita">Penalit� tempo</div></th>
 <th><div class="penalita">Penalit� extra</div></th>
 <th><div class="penalita">Penalit� no time</div></th>
 <th><div class="penalita">Tot Penalit�</div></th>


</tr>
 </thead>
<tbody id="example">


 
<?php
$n_prova=0;
if(@$result->num_rows > 0)
{ while($row = mysqli_fetch_array($result))
  {  
$n_prova++;
$id_pilota=$row['id_pilota'];
$id_prova=$row['id'];
$id_evento=$row['id_evento'];
$tempo_imposto=$row['tempo_imposto'];
	 
	 
$query_pilota = "SELECT * FROM piloti WHERE id='$id_pilota' "; //echo $query_pilota."<br>";
$result_pilota=mysqli_query($conn,$query_pilota) or die(mysqli_error($conn));
$row_pilota = $result_pilota->fetch_array(MYSQLI_ASSOC);


$nome_pilota=$row_pilota['nome']; $cognome_pilota=$row_pilota['cognome'];
$nominativo_pilota=$nome_pilota." ".$cognome_pilota;
$id_pilota_riga=$row_pilota['id'];
$cat_pilota=$row_pilota['categoria_pilota'];
$squadra=$row_pilota['squadra'];




$query_rilev = "SELECT * FROM dati_core_rilevati WHERE id_progres='$id_prova' "; //echo $query_rilev;
$result_rilev =mysqli_query($conn,$query_rilev ) or die(mysqli_error($conn));
$row_rilev  = $result_rilev ->fetch_array(MYSQLI_ASSOC);


$tempo_rilevato=$row_rilev['tempo_rilevato'];




$query_part = "SELECT * FROM ordine_partenza WHERE id_pilota='$id_pilota' AND id_evento = '$id_evento'  ";  //echo $query_part;
$result_part = mysqli_query($conn, $query_part) or die(mysqli_error($conn));	 
$row_part  = $result_part ->fetch_array(MYSQLI_ASSOC);


$id_posizione=$row_part['id_posizione'];


?>


      <tr>
      
<td <?php if($id_posizione % 2 == 0){?>style="background-color:#F1F2F2;"<?php } else {?>style="background-color:#fff;"<?php } ?>><?php /*echo $id_prova." ".*/echo $nominativo_pilota?></td>


<td <?php if($id_posizione % 2 == 0){?>style="background-color:#F1F2F2;"<?php } else {?>style="background-color:#fff;"<?php } ?>><?php echo $row["tempo_imposto"]?></td>


<td <?php if($id_posizione % 2 == 0 & $tempo_rilevato !="00:00:00.00"){?>style="background-color:#F1F2F2;"<?php }
          if($tempo_rilevato=="00:00:00.00"){?>style="background-color:#FFD0D0;"<?php }
		  else {?>style="background-color:#fff;"<?php } ?>><?php echo $row_rilev['tempo_rilevato'];?>
          
</td>
    




<?php  






$query_pen2 = "SELECT * FROM penalita WHERE id_evento='$id_evento' AND nome_penalita <> 'No-time'"; //echo $query_pen2."<br>";
$result_pen2 = mysqli_query($conn, $query_pen2) or die(mysqli_error($conn));
$n_pen = $result_pen2->num_rows;


if(@$result_pen2->num_rows > 0)
{ while($row_pen2 = $result_pen2->fetch_array(MYSQLI_ASSOC))
  {  
$id_penalita_up=$row_pen2['id'];


$query_pen3 = "SELECT * FROM penalita WHERE id_evento='$id_evento' AND id=$id_penalita_up AND nome_penalita <> 'No-time' "; //echo $query_pen3."<br>";
$result_pen3 = mysqli_query($conn, $query_pen3) or die(mysqli_error($conn));
$row_pen3 = $result_pen3->fetch_array(MYSQLI_ASSOC);


$id_penalita=$row_pen3['id']; $nome_penalita=$row_pen3['nome_penalita']; $valore_penalita=$row_pen3['valore_penalita'];




?>     


       <td bgcolor="#FFD0D0" <?php if($id_posizione % 2 == 0){?>style="background-color:#F1F2F2;"<?php } else {?>style="background-color:#fff;"<?php } ?>>




             
<?php $string_ajax_piu = "$id_pilota,$id_prova,$id_penalita,$valore_penalita,$id_manche,$n_manche,piu";?>
<?php $string_ajax_meno = "$id_pilota,$id_prova,$id_penalita,$valore_penalita,$id_manche,$n_manche,meno"; //echo $string_ajax_meno?>
   






<div class="btn-group btn-group-toggle" data-toggle="buttons">


         <span class='delete btn btn-outline-success' data-id='<?= $string_ajax_piu; ?>'>+</span>
         <span class='delete btn btn-outline-danger' data-id='<?= $string_ajax_meno; ?>'>-</span>


</div>








        
 <?php      
	$sql_pena1 = "SELECT SUM(punti) AS somma1 FROM penalita_rilevate WHERE id_prova='$id_prova' AND punti='$valore_penalita' AND tipo_penalita = 'extra'  "; //echo $sql_pena1;
	$result_pena1 = $conn->query($sql_pena1) or die(mysqli_error($conn));
	$row_pena1 = $result_pena1->fetch_assoc();
	$n_pena1 = $result_pena1->num_rows;
	
	echo "<div class=\"piccolo1\"><br>" . $row_pena1['somma1']."</div>";
?>
</td>
    
      
   
     
       
<?php  }}     




	$sql_pena = "SELECT SUM(punti) AS somma_tot FROM penalita_rilevate WHERE id_prova='$id_prova' AND tipo_penalita = 'extra' "; //echo $sql_pena;
	$result_pena = $conn->query($sql_pena) or die(mysqli_error($conn));
	$row00_pena = $result_pena->fetch_assoc();
	$n_pena = $result_pena->num_rows;
	
	$tot_penalita_extra = $row00_pena['somma_tot'];
	
	
	


 ?>
   <td <?php if($id_posizione % 2 == 0){?>style="background-color:#F1F2F2;"<?php } else {?>style="background-color:#fff;"<?php } ?>>
   
   <?php
  // echo "str: $str<br>";




$timeFrom = $tempo_rilevato;
$timeTo = $tempo_imposto;
$dateFrom = DateTime::createFromFormat('H:i:s.u', $timeFrom);
$dateTo = DateTime::createFromFormat('H:i:s.u', $timeTo);
@$interval = $dateTo->diff($dateFrom);
$penalty = $interval->i * 6000 + $interval->s * 100 + $interval->f * 100;




//trovo il valore fisso della penalita no time riferita all'evento 
$query_pen5 = "SELECT * FROM penalita WHERE id_evento='$id_evento' AND nome_penalita = 'No-time' "; //echo $query_pen5;
$result_pen5 = mysqli_query($conn, $query_pen5) or die(mysqli_error($conn));
$row_pen5 = $result_pen5->fetch_array(MYSQLI_ASSOC);
$n_penalita_no_time = $result_pen5->num_rows;


$valore_penalita_no_time=$row_pen5['valore_penalita'];


// cerco se esiste un campo vuoto e creo la penalita_no_time 
	$sql_no_time = "SELECT * FROM dati_core_rilevati WHERE id_progres='$id_prova'"; //echo $sql_no_time;
	$result_no_time = $conn->query($sql_no_time) or die(mysqli_error($conn));
	$row_no_time = $result_no_time->fetch_assoc();


    $campo_vuoto=$row_no_time['tempo_rilevato'];




//if($punti>0){$penalty=$punti; $tipo_pen='tempo';}
if($campo_vuoto == '00:00:00.00' & $flag_no_time==1){$penalty=$valore_penalita_no_time; $tipo_pen='no_time';}
if($campo_vuoto == '00:00:00.00' & $flag_no_time==0){$tipo_pen='tempo';}
if($campo_vuoto != '00:00:00.00'){$tipo_pen='tempo';}


print($penalty); 


@$somma_penalita_totali=$penalty+$tot_penalita_extra;






	
//echo "str -> $str";
//$str != "00:00:00.00"






if(isset($_POST["upload"]))
//if((isset($_POST["upload"]))&($n_rileva==0))
{	


$sql = "DELETE FROM penalita_rilevate WHERE id_prova='$id_prova' AND tipo_penalita <>'extra'"; //echo $sql;
$conn->query($sql);


$sql_insert="INSERT INTO penalita_rilevate (id_pilota, id_evento, id_manche, n_manche, id_club, id_prova, tipo_penalita, id_penalita, punti, data_creazione, cat_pilota, squadra)
VALUES
($id_pilota_riga, '$id_evento', '$id_manche', '$n_manche', '$id_club', '$id_prova','$tipo_pen', '$id_penalita', '$penalty', '$data_creazione', '$cat_pilota', '$squadra')";
mysqli_query($conn,$sql_insert);	






}






?>
   
   
   </td> 
<td <?php if($id_posizione % 2 == 0){?>style="background-color:#F1F2F2;"<?php } else {?>style="background-color:#fff;"<?php } ?>><?php if($tot_penalita_extra==0)$tot_penalita_extra=''; echo $tot_penalita_extra;?></td>
       <td <?php if($id_posizione % 2 == 0){?>style="background-color:#F1F2F2;"<?php } else {?>style="background-color:#fff;"<?php } ?>><?php  echo $penalita_no_time; ?></td>
      <td <?php if($id_posizione % 2 == 0){?>style="background-color:#F1F2F2;"<?php } else {?>style="background-color:#fff;"<?php } ?>><?php echo $somma_penalita_totali; ?></td>
       
      </tr>
<?php 


//echo $sql_insert."<br>";
    }}
	
 ?>
	</tbody> 
    </table>

$(document).ready(function(){




    // Delete 
$('#example').on('click', '.delete', function(){
        var el = this;




        // Delete id
        var id = $(this).data('id');
        
      
        //if (confirmalert == true) {
            // AJAX Request
            $.ajax({
                url: 'insert_flag_penalita.php',
                type: 'POST',
                data: { id:id },
                success: function(response){
    
           if(response == 1){
           $('#example').load(document.URL + ' #example');
           }else{
           alert('Invalid ID.');
           }
               }
            });
       }
   );
});

[KillerWorm]

Personalmente farei qualche console.log e andrei per esclusione.


Quel "invalid id" si riferisce all'alert della condizione nel success della chiamata AJAX, giusto?
Non ci sono altri alert che ti danno quel messaggio, giusto?

Se ti arriva quell'alert significa che la condizione (response == 1) non è verificata.

Controlla quindi cosa ti arriva su quel "response".

Appena prima della condizione metti:

 console.log('risposta AJAX:', response);

Quindi nella console del tuo browser verifica cosa ti salta fuori compiendo tale operazione.

Se non ti arriva il valore "1" allora qualcosa sta andando storto in insert_flag_penalita.php, forse nella logica usata. In questo caso fai le dovute verifiche di tale PHP.

Magari verifica ancora nel JavaScript il valore della variabile id.

Metti un log dopo che popoli tale variabile:

var id = $(this).data('id');
console.log('valore data(id):', id);

Controlla che il valore sia confacente a quanto si aspetta il tuo PHP.

Se è un valore ammissibile allora il problema resta in insert_flag_penalita.php.

[Alextn]

Grazie per il suggerimento.
Aprendo la console mi sono accorto che veniva richiamato uno script che ho aggiunto successivamente, per rilevare e reindirizzare i browser mobile. Non riesco a capire come poteva essere lui il problema, ma prendo atto che eliminandolo tutto funziona. Tra il resto lo script, che riporto qui sotto, era commentato, per tanto non doveva essere in funzione.

<!--<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) ||(navigator.userAgent.match(/blackberry/i))|| (navigator.userAgent.match(/nokia/i)) || (navigator.userAgent.match(/android/i)) || (navigator.userAgent.match(/symbian/i))){ location.href='no_mobile_advisor.php';}

</script>-->