Come riconoscere il pulsante premuto in una tabella html con Javascript

[_th3answer]

Salve, sto progettando una web Application , che utilizza esclusivamente il php per la parte server e html e js per la parte client. Il mio problema è il seguente, sono arrivato ad un punto del mio progetto in cui , mi genero la tabella nella pagina html per le richieste generate dall'utente prelevando i dati dal database, la tabella contiene tutti i campi del database, ho fatto un ulteriore colonna dove ho aggiunto i pulsanti 'APPROVA' per ogni riga della tabella. Quello che voglio fare ma non riesco è : al click del pulsante 'APPROVA' di una riga 'x' della tabella al quale corrisponde una richiesta , la richiesta viene cancellata sia dalla tabella che dal database.
Grazie!

[KillerWorm]

Ciao e benvenuto, purtroppo la tua richiesta non è liquidabile con una semplice risposta perché l'intero processo di comunicazione tra client e server, per ciò che hai descritto, è relativamente complesso e andrebbe pertanto suddiviso in più sottoprocessi da esaminare e mettere a punto opportunamente.

In generale potrei identificare queste principali parti:
1 - Applicare un gestore di evento per la serie di pulsanti
2 - Determinare una convenzione che permetta di risolvere la richiesta al server in modo ottimale, ad es. tramite passaggio di parametri
3 - Impostare la chiamata per comunicare col server, ad es. usando AJAX per un aggiornamento dei dati in background
4 - Gestire la risposta per il successo della richiesta o per eventuali errori, quindi mostrare il risultato nella pagina

Per lo sviluppo di ciascuna di queste parti non c'è una regola fissa, bisogna capire come tu preferisci procedere a livello di ingegneria del software (vedi concetti come pulizia del codice, estensibilità, riusabilità, leggibilità), quali risorse puoi/vuoi utilizzare (ad es. vedi l'uso di librerie come jQuery per semplificare alcuni passaggi nella stesura dello script).

Personalmente procederei in questo modo:

- A ciascun tag pulsante (o in generale a ciascuna riga della tabella) applico un attributo data- che uso per passare l'id del relativo record da gestire;
- Includo jQuery;
- Con i dovuti accorgimenti applico il metodo click() alla serie di pulsanti;
- Nel callback del click() recupero l'id del record e richiamo la mia funzione approvaRichiesta(id) passandole il valore dell'id;
- Quindi avrò creato la mia funzione approvaRichiesta(id) dove avrò inserito la chiamata AJAX che avvia lo script server a cui passo il relativo id del record da gestire;
- Nell'attesa della risposta dal server, frizzo in qualche modo la pagina (o il pulsante appena cliccato) con un eventuale messaggio/segnale di attesa, così che non sia possibile accavallare più richieste contemporaneamente (un sistema più affidabile, dovrebbe comunque prevedere un controllo anche lato server);
- Al success della chiamata AJAX (quindi ad avvenuto aggiornamento del db) eseguo runtime l'aggiornamento della pagina (o, in particolare, l'aggiornamento di quella specifica riga della tabella), magari con un effetto che faccia capire che la cancellazione del record è avvenuta correttamente, quindi ripristino le funzionalità dell'intera pagina;
- Imposto la gestione di eventuali errori della chiamate AJAX, mostrando magari un opportuno effetto/messaggio che indichi la mancata cancellazione del record, eventualmente ripristino le funzionalità della pagina in modo da poter riprovare ad eseguire l'azione;

Sempre che io abbia capito il problema, prova a seguire questi punti (anche consultando i link proposti) per iniziare ad impostare qualcosa, se poi incontri problemi riporta qui i dettagli così che ti si possa eventualmente fornire indicazioni più precise su come procedere.

Buon proseguimento

[_th3answer]

Ciao, ti ringrazio intanto per la risposta, sei stato gentilissimo e molto esaustivo! Io sono riuscito a gestire il 'problema' con il php, ma ho dei requisiti da soddisfare nel caso in cui non dovesse andare bene il mio approccio, seguirò i consigli che tu mi hai proposto. Ti ringrazio anche per la tua disponibilità per eventuali problemi non esiterò a scrivere qui!

[_th3answer]

Salve, sono riuscito a creare la tabella in javascript e assegnare il pulsante ad ogni riga della tabella con relativo id, adesso il mio problema sta nell'elaborare il codice php per prelevare i dati dal database, quello che riesco a fare è : fare una query ad esempio:

"SELECT quantity,IDprodotti FROM acquisti WHERE IDrichiesta = 15"

Quello che voglio fare ma non riesco è fare una query nella quale non inserisco io il parametro , così da far avviare il codice php al click del bottone 'x' con la chiamata ajax

spero di non aver fatto troppa confusione

[KillerWorm]

sono riuscito a creare la tabella in javascript

Ciao, la tabella forse è meglio crearla lato server (cioè con un ciclo PHP), come penso tu avessi già fatto inizialmente, o sbaglio?

Quello che voglio fare ma non riesco è fare una query nella quale non inserisco io il parametro

La query al db va costruita chiaramente in modo dinamico, cioè passando quel valore (che nel tuo esempio è "15") attraverso un parametro che avrai impostato nella chiamata AJAX. Bisogna però vedere a che punto sei arrivato.

Magari posta un esempio (un link ad una pagina pubblica o un estratto di codice) di ciò che hai fatto, così si può capire meglio dove ti sei arenato e darti eventuali consigli su come proseguire.

[_th3answer]

Si inizialmente avevo fatto la tabella lato server adesso posto il codice della tabella lato client, mi sono arenato proprio nella costruzione delle query in modo dinamico anche perché non sono così esperto di php

questo è html della tabella:
<table id="productsDataTable" border=1>
<br>

<tr>

<th>IDprodotti</th>
<th>Tipo</th>
<th>Nome</th>
<th>Quantity</th>


</tr>

</table>


il javascript

$("#visual").click(function(){
$.ajax({
url: *,
type: "get",
dataType: "json",


success: function(data) {
drawTable(data.elenco);

}
});



function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}


function drawRow(rowData) {
var row = $("<tr />")
$("#viewReq").append(row);
row.append($("<td>" + rowData.IDrequest + "</td>"));
row.append($("<td>" + rowData.IDutente + "</td>"));
row.append($("<td>" + rowData.IDprodotti + "</td>"));
row.append($("<td>" + rowData.Quantity + "</td>"));
row.append($("<td><button onclick='mi(\"" + rowData.IDrequest + "\")'>Approva</button></td>"))
}


});


ESEMPIO TABELLA

ID REQUEST | IDUTENTE | ID PRODOTTI | QUANTITA' |

15 2 6 3 APPROVA

18 5 3 1 APPROVA

non sono riuscito a postare la foto della tabella vorrei che al click su approva (chiamata Ajax) partisse lo script php

[KillerWorm]

Ok, fammi capire, in questo caso la tabella viene generata e compare al click sul pulsante #visual, giusto?

Per l'evento click sui pulsanti "APPROVA" hai impostato direttamente l'attributo onclick che chiama la funzione mi(). passando il valore IDrequest.
Cosa c'è in quella funzione?

Suppongo che li debba essere impostata la chiamata AJAX che andrà ad eseguire quell'azione, più o meno come quella che hai già fatto per la creazione della tabella ma, chiaramente, l'url punterà alla pagina che dovrà elaborare quel dato e, inoltre, dovrai passare appunto quel valore IDrequest, come parametro della chiamata.

Mettiamo che la tua funzione riceva quel dato attraverso la variabile idRichiesta.
A questo punto puoi passare questo valore attraverso un parametro usando la proprietà data di quell'oggetto ajax.
La tua funzione sarà una cosa di questo tipo:

mi(idRichiesta){
  $.ajax({
      type: "GET",
      url: 'approva.php',
      data: {IDrequest: idRichiesta},
      success: function(rispostaServer){
          alert(rispostaServer);
      }
  });
}

Nella pagina approva.php quindi puoi recuperare quel valore attraverso $_GET['IDrequest'], quindi usarlo per assemblare la tua SELECT e compiere le operazioni nel db.

[_th3answer]

Si si esatto, scusami sono stato poco chiaro al riguardo, la tabella viene generata al click del pulsante nella pagina html, nella funzione mi() avevo fatto una prova dove mi stampavo l'ID per vedere se funzionava correttamente e mi dava l'id corretto di ogni riga. Adesso provo utilizzando quello che mi hai chiesto

[_th3answer]

Salve, ho provato ad impostare la query come mi hai suggerito e faccio esattamente così imposto la connessione nel file php e si connette al database poi quello che faccio è :

codice:

$idtemp=isset($_GET['IDrequest']);
$risultati_mysql = mysqli_query($connessione,"select quantity,IDprodotti from acquisti where IDrequest = '$idtemp' ");


echo $idtemp;

ho impostato la chiamata Ajax come mi hai scritto sopra e quando vado a cliccare sul bottone quello che mi compare nell'alert è 1

[KillerWorm]

Bene, quindi sta funzionando?