Auto refresh di un singolo elemento

[whatsapppiva]

Buongiorno a tutti
ho la necessità di aggiornare un <tbody> ed ovviamente il suo contenuto ogni 500ms
il tag contiene tuttavia una query in php che genera, in base al suo risultato i <tr> della tabella.

tramite un js sono riuscito ad avere il refresh ma questo non mi riesegue la query e non ho idea di come poter fare...
mi potreste aiutare?
Grazie

<tbody id="Container">

<?php

$query = "SELECT * FROM UTENTI WHERE username='".$nome_utente."' && password='".$password."' && stato_account!='bloccato'";
$risultato_query = $mysqli -> query($query);

$numero_risultati_query = $risultato_query->num_rows;

$nome_parametro_ricercato_per_funzione = $risultato_query -> fetch_assoc();
$username=$nome_parametro_ricercato_per_funzione["username"];
$password=$nome_parametro_ricercato_per_funzione["password"];
$negozio=$nome_parametro_ricercato_per_funzione["negozio"];
$messaggio=$nome_parametro_ricercato_per_funzione["messaggio"];
$stato_account=$nome_parametro_ricercato_per_funzione["stato_account"];
$nome_tabella ="contatti_".$negozio;

$i=0;


$sql_query = "SELECT * FROM $nome_tabella WHERE messaggio_inviato='' ORDER BY $nome_tabella.`id` ASC";

$risultato_query = $mysqli -> query($sql_query);

$numero_risultati_query = $risultato_query->num_rows;








while ($row = $risultato_query->fetch_array(MYSQLI_ASSOC)) {

# variabili
?>

<tr class="odd gradeX">

<td>
<form class="form-vertical" action="registra_invio.php" method="get" target="_blank">

<input name="invia" type="submit" value="<?php echo strtoupper($row['numero']) ?>">
<input type="text" name="id" value="<?php echo strtoupper($row['id']) ?>" style="display: none;" readonly >
<input type="text" name="numero" value="<?php echo strtoupper($row['numero']) ?>" style="display: none;" readonly >
<input type="text" name="messaggio" value="<?php echo $messaggio ?>" style="display: none;" readonly >
<input type="text" name="nome_tabella" value="<?php echo $nome_tabella ?>" style="display: none;" readonly >
</form>

</td>

</tr>

<?php


$i++;
}

?>
</tbody>

JS:

<script>

        function test(){

          setInterval(

               function reload(){

                 var container = document.getElementById("Container");

                 var content = container.innerHTML;

                 container.innerHTML= content;



                //this line is to watch the result in console , you can remove it later

                 console.log("Refreshed");

               }

           , 500);

         };
        </script>

[mzanella]

Devi usare AJAX o AJAJ.
Tramite JavaScript devi impostare una funzione di callback, come già hai fatto, ma anziché leggere il contenuto attuale e riscriverlo devi avviare una richiesta HTTP GET verso una pagina PHP, appositamente creata, che eseguirà la query e restituirà un risultato, preferibilmente in formato JSON. Il codice JavaScript chiamante riceverà questo risultato e lo mostrerà dove necessario.

A parte questo ci sono un paio di problemi nel codice che hai mostrato:

• sembra tu stia memorizzando le password in chiaro nel database: nell'era GDPR questo è un grosso problema; usa password_hash e password_verify
• stai selezionando il contenuto di un'intera tabella in una sola volta: per quanto i cursori di SQL siano efficienti, man mano che la tabella si riempie avrai pagine sempre più pesanti e lente a caricare; dovresti considerare l'uso di una paginazione (soluzione che si abbina benissimo all'AJAX che devi già usare)
• un polling su HTTP ogni 500ms come quello che hai descritto probabilmente è eccessivo, soprattutto considerando che hai una query con sorting; probabilmente 5000ms è già più ragionevole

[whatsapppiva]

aimeh non posso farlo perchè la tabella è formattata (vedi qui ed accedi con "test | test"
se scrivo i dati della tabella su un'altra pagina e la richiamo questa non prende la formattazione (vedi qui)

[mzanella]

La formattazione, in un sistema AJAX, la crea dinamicamente il JavaScript.
La pagina PHP, quella appositamente creata per restituire i soli dati, restituisce generalmente un documento JSON, senza formattazione.
Lo script JavaScript che invia la richiesta e riceve i dati si occupa di mostrarli, creando eventualmente gli elementi del DOM necessari.
Molti usano template engine come handlebars per semplificare la gestione di questo punto.

[whatsapppiva]

sei così gentile da farmi un esempio utilizzando i miei dati?
aimeh sono neofita di questo mondo quindi non ne capisco gran che

[mzanella]

Hai bisogno di almeno due pagine, per semplicità chiamiamole a.php e b.php. La prima mostra la tabella, la seconda è quella che viene chiamata dalla prima come descritto sopra. Do per scontato l'uso di jQuery, farlo a mano sarebbe inutilmente lungo e complesso.

a.php

...
<!-- Table body is initially clean -->
<tbody id="Container">
</tbody>
...

<!-- Includes jQuery -->
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>
// Fetches and displays data
function update() {
    var container = $('#container')
    $.get('b.php', function (data) {
        // Removes previous data
        container.empty()

        // For each record in the result set...
        for (var i = 0; i < data.length; i++) {
            // Generates a new table row
            var tr = $('<tr/>').addClass('odd').addClass('gradeX')

            // Generates a new table data cell
            var td = $('<td/>');

            // Generates a new form
            var form = $('<form/>').addClass('form-vertical')

            // Generates new inputs
            $('<input/>').attr('name', 'invia').attr('type', 'submit').val(data[i].numero).appendTo(form)
            $('<input/>').attr('name', 'id').attr('type', 'text').val(data[i].id).appendTo(form)
            $('<input/>').attr('name', 'numero').attr('type', 'text').val(data[i].numero).appendTo(form)
            $('<input/>').attr('name', 'messaggio').attr('type', 'text').val(data[i].messaggio).appendTo(form)
            // ecc

            // Attaches form to table data cell, cell to row and row to container table
            form.appendTo(td)
            td.appendTo(tr)
            tr.appendTo(container)
        }
    }
}

// Sets timer for repetition
setInterval(update, 500)
</script>

b.php

$mysqli = ... // Setup connection
$query = "SELECT * FROM NOME_TABELLA WHERE messaggio_inviato='' ORDER BY id ASC";
$result = $mysqli->query($query);

$data = [];
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $data[] = $row;
}

// Sets appropriate header and writes data as JSON document
header('Content-Type: application/json');
echo json_encode($data); 

Nota: così com'è ci sono aspetti che non funzionano, per esempio il nome della tabella che non conosco. Inoltre non è testato (non avendo a disposizione un ambiente analogo al tuo), quindi ci sono probabilmente errori di sintassi, ma la logica dovrebbe essere abbastanza ben delineata.

[whatsapppiva]

benissimo
come puoi vedere qui accedendo come test|test funziona
tuttavia non riesco ad ottenere i campi input contenenti il messaggio ed il nome tabella
perchè se noti non sono il risultato della stessa query...tuttavia questi dati sono già salvati nella variabile di sessione php $messaggio e $nome_tabella

[mzanella]

In questo caso vanno aggiunti alla pagina b.php, verosimilmente modificando questo pezzo

while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $data[] = $row;
} 

in questo modo:

while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $record = $row;
    $record['messaggio'] = $_SESSION['messaggio'];
    $data[] = $record;
} 

Analogamente puoi leggere il nome della dalla sessione. Sembra un po' strano far decidere la tabella cui leggere da una sessione, di solito questo è indice del fatto che il database non è correttamente normalizzato, ma rispetto al problema del recupero dei dati non è rilevante.

[whatsapppiva]

benissimo, sono riuscito a completare il tutto, il problema è che mi ha perso la formattazione della tabella
e non capisco il perchè ogni volta che passo i dati della tabella da un'altra pagina mi fa questo lavoro

vedi qui

[mzanella]

benissimo, sono riuscito a completare il tutto, il problema è che mi ha perso la formattazione della tabella
e non capisco il perchè ogni volta che passo i dati della tabella da un'altra pagina mi fa questo lavoro

Accedendo alla pagina vedo, nella console del browser, degli errori relativi al JavaScript:

Uncaught Invalid dimensions for plot, width = null, height = null
Uncaught ReferenceError: test is not defined at onload (index.php?inputEmail=test&inputPassword=test:139)

è possibile che causino il problema.

[whatsapppiva]

Il secondo errore l'ho risolto
ma con il secondo non ne vengo fuori

Uncaught Invalid dimensions for plot, width = null, height = null

Però posso dirti che, quell'errore non è la causa del non funzionamento della tabella, in quanto su
questa pagina in cui ho incluso tramite il seguente codice:

<?php

        $sql_query = "SELECT * FROM $nome_tabella WHERE messaggio_inviato='' ORDER BY $nome_tabella.`id` ASC";
        $risultato_query = $mysqli -> query($sql_query);
        $numero_risultati_query = $risultato_query->num_rows;




        while ($row = $risultato_query->fetch_array(MYSQLI_ASSOC)) {
            # variabili
                ?>
                <tr class="odd gradeX">
                    <td>
                      <form class="form-vertical" action="registra_invio.php" method="get" target="_blank">


                        <input name="invia" type="submit" value="<?php echo strtoupper($row['numero']) ?>" style="background-color: transparent; border: none; width:100%; text-align: left;">

                        <input type="text" name="id" value="<?php echo strtoupper($row['id']) ?>" style="visibility: hidden; readonly">
                        <input type="text" name="numero" value="<?php echo strtoupper($row['numero']) ?>" style="visibility: hidden; readonly">
                        <input type="text" name="messaggio" value="<?php echo $messaggio ?>" style="visibility: hidden; readonly">
                        <input type="text" name="nome_tabella" value="<?php echo $nome_tabella ?>" style="visibility: hidden; readonly">
                      </form>
                    </td>
                  </tr>
                <?php

    $i++;
        }

 ?>

il ciclo while che mi genera i <tr> funziona correttamente pur generando lo stesso errore in console


ho notato anche che non funziona ne la ricerca ne tantomento il conteggio dei risultati
infatti sulla parte inferiore della tabella sulla "index funzionante" (ove manca il refresh automatico) appare il numero di risultati mostrati su quanti in totale
in quella non funzionante non rileva il numero

[darbula]

Se è la mia prima visita al sito non esiste alcun valore per la sessione. La sessione non è magia ma in molti casi di predefinito salva su file e appunto se non ti conosce prima non può salvare.
Stato iniziale della sessione http (non dovrà essere attiva)

//attivazione o recupero sessione
session_start();
if(empty($_SESSION['messaggio'])) // Verifica iniziale se la pagina è caricata ogni mezzo secondo, imposta il default a null
$_SESSION['messaggio'] = null; //Valore globale iniziale a null 

Se l'utente invia messaggio (o comunque già esiste nel database)

 //Creo da qualcosa o aggiorno da qualcosa
$_SESSION['messaggio'] = 'valore query database o dal form html direttamente digitato dal tuo utente'; 

Giustamente se mi connetto per la prima volta e visualizzo solo la pagina html, l'utente non può avere il messaggio memorizzato nella sessione (discorso diverso se recuperare il messaggio dal database che comunque la scelta della sessione è errata ma recupera il dato fisso dal database).

file recupero stringa e creo dati in formato json come oggetto ad esempio { "name": "john", "time": "2pm" }. page2.php

<?php
header('Content-Type: application/json');
if (isset($_GET['_'], $_GET['name'], $_GET['time']) && is_string($_GET['_']) && is_string($_GET['name']) && is_string($_GET['time']))
echo json_encode(array('_' => $_GET['_'], 'name' => $_GET['name'], 'time' => $_GET['time']));
else
echo '{}'; //Da jquery 1.9 devo ritornare null o {} altrimenti non è un json valido.

?>

supponi che la query del database ritorni una variabile array. Mentre array() è un costrutto di linguaggio utilizzato per rappresentare array letterali e non una funzione regolare, mi occorre per creare il json poiché non uso una variabile array.

page1.php

<?php
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajax({
url: "page2.php",
type: "GET",
cache: false, // add _=timestamp
data: { name: "john", time: "2pm"},
dataType: "json",
success: function(result){
var str = result._ + result.name + result.time;
$("div#risposta").html(str);
},
error: function(richiesta,stato,errori){
$("div#risposta").html("Chiamata fallita: "+stato+" "+errori);
}
});
</script>
</head>
<body>
<div id="risposta"></div>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

Questo è jquery non necessariamente markup html, non scrivo il form ma effettuo l'invio, ergo richiesta http GET a page2.php (query string http://www.example.com/page2.php?name=john&time=2pm) ma puoi impostare .
Il nome di page2.php può anche essere riscritto in ciò che a te serve, nel mio esempio creo un'oggetto Javascript (il valore di data: può anche essere stringa o oggetto jquery o oggetto dom nativo oltre che oggetto Javascript) trasformato e inviato in stringa da jquery.
Questo è un semplice esempio ma solitamente effettui operazioni solo al completamento del caricamento di pagina, per questo motivo c'è button anche se non l'oggetto jquery, ergo $("button"), cache false non memorizza la pagina nella cache.

[whatsapppiva]

Se è la mia prima visita al sito non esiste alcun valore per la sessione. La sessione non è magia ma in molti casi di predefinito salva su file e appunto se non ti conosce prima non può salvare.
Stato iniziale della sessione http (non dovrà essere attiva)

//attivazione o recupero sessione
session_start();
if(empty($_SESSION['messaggio'])) // Verifica iniziale se la pagina è caricata ogni mezzo secondo, imposta il default a null
$_SESSION['messaggio'] = null; //Valore globale iniziale a null 

Se l'utente invia messaggio (o comunque già esiste nel database)

 //Creo da qualcosa o aggiorno da qualcosa
$_SESSION['messaggio'] = 'valore query database o dal form html direttamente digitato dal tuo utente'; 

Giustamente se mi connetto per la prima volta e visualizzo solo la pagina html, l'utente non può avere il messaggio memorizzato nella sessione (discorso diverso se recuperare il messaggio dal database che comunque la scelta della sessione è errata ma recupera il dato fisso dal database).

file recupero stringa e creo dati in formato json come oggetto ad esempio { "name": "john", "time": "2pm" }. page2.php

<?php
header('Content-Type: application/json');
if (isset($_GET['_'], $_GET['name'], $_GET['time']) && is_string($_GET['_']) && is_string($_GET['name']) && is_string($_GET['time']))
echo json_encode(array('_' => $_GET['_'], 'name' => $_GET['name'], 'time' => $_GET['time']));
else
echo '{}'; //Da jquery 1.9 devo ritornare null o {} altrimenti non è un json valido.

?>

supponi che la query del database ritorni una variabile array. Mentre array() è un costrutto di linguaggio utilizzato per rappresentare array letterali e non una funzione regolare, mi occorre per creare il json poiché non uso una variabile array.

page1.php

<?php
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajax({
url: "page2.php",
type: "GET",
cache: false, // add _=timestamp
data: { name: "john", time: "2pm"},
dataType: "json",
success: function(result){
var str = result._ + result.name + result.time;
$("div#risposta").html(str);
},
error: function(richiesta,stato,errori){
$("div#risposta").html("Chiamata fallita: "+stato+" "+errori);
}
});
</script>
</head>
<body>
<div id="risposta"></div>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

Questo è jquery non necessariamente markup html, non scrivo il form ma effettuo l'invio, ergo richiesta http GET a page2.php (query string http://www.example.com/page2.php?name=john&time=2pm) ma puoi impostare .
Il nome di page2.php può anche essere riscritto in ciò che a te serve, nel mio esempio creo un'oggetto Javascript (il valore di data: può anche essere stringa o oggetto jquery o oggetto dom nativo oltre che oggetto Javascript) trasformato e inviato in stringa da jquery.
Questo è un semplice esempio ma solitamente effettui operazioni solo al completamento del caricamento di pagina, per questo motivo c'è button anche se non l'oggetto jquery, ergo $("button"), cache false non memorizza la pagina nella cache.

MA la sessione è forzata
nel senso che, nella mia pagina c'è già un php che verifica la presenza della sessione, e qualora questa sia nulla reindirizza alla pagina di login, ed appena accedi tramite questa si crea la sessione con il relativo messaggio

per quanto riguarda l'esempio che mi hai riportato non ci ho capito nulla abbi pazienza ma di Jquery e quindi, di riflesso anche di Json mi ci sto approcciando ora per la prima volta

[darbula]

Ottimo per la sessione.
Beh c'è page1 che effettua una richiesta GET a page2 con parametri chiave/valori nel contesto url è query string http://www.example.com/page2.php?name=valore&time=valore mentre page2 recupera i parametri chiave/valore query string e li codifica in formato json. Quella pagina può produrre solo formato json e non anche altro (per questo motivo penso che vedi tutto sballato). Adesso ti chiedo per favore di rispondermi, secondo te le parentesi graffe denotano l'insalata? Uhm.. il formato json è racchiuso tra parentesi graffe e se di tipo stringa usa il doppio apice tra il tipo stringa altrimenti non è json valido. Nota i doppi apici Json: { "name": "john", "time": "2pm" } Javascript: { name: "john", time: "2pm" }
Nel tuo precedente messaggio cancellato chiedevi una richiesta GET a registra_invio.php (dunque se invece di page2.php sostituisci con registra_invio.php e modifichi i parametri chiave/valore per impostare la giusta query string) ti ho mostrato come fare via Jquery (l'oggetto Javascript di data oppure anche stringa convertita manualmente alla codifica percentuale name=valore+testo&time=valore il simbolo + significa spazio bianco nella codifica url) , mentre l'oggetto se non impostato diversamente applica la conversione da oggetto a stringa e applica la codifica percentuale).
Comunque Ajax o json significa solo caratteri compresi in UTF-8 non ISO-8859-1 etc.