Löschen der Tabellenzeile bei Button-Klick mit Ajax

Question

Ich habe eine HTML-Tabelle mit 4 Spalten: SKU-Gruppe, Group_ID, Schaltfläche Bearbeiten und Löschen. Ich arbeite jetzt an der Löschfunktion und möchte, dass, wenn ich die Löschtaste drücke, eine Bestätigungsbox erscheint und dann, wenn "OK" gedrückt wird, löscht sie die Zeile und sendet eine Löschabfrage, die sie aus der Datenbank löscht.

Ich weiß, ich bin Ajax und einen separaten PHP-Skript für die Lösch-Abfrage zu verwenden, aber kann nicht scheinen, um herauszufinden. Jede Hilfe wird geschätzt!

HTML für Delete-Taste:

<td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td> 

JavaScript ... Ich weiß, das einige Arbeit braucht, aber es wegen meiner Frage bin Entsendung:

function deleteRow(r) { 

if (confirm('Are you sure you want to delete this entry?')) { 
    var i = r.parentNode.parentNode.rowIndex; 
    document.getElementById("skuTable").deleteRow(i); 
    } 



    request = $.ajax({ 
     type: "POST", 
     url: "delete.php", 
     data: i 
    }); 


     request.done(function (response, textStatus, jqXHR){ 
      if(JSON.parse(response) == true){ 
      console.log("row deleted"); 
      } else { 
      console.log("row failed to delete"); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 

     }); 


} 

delete.php:

<?php 

    $SKU_Group = $_POST['SKU Group']; 
    $Group_ID = $_POST['Group_ID']; 

    $host="xxxxxx"; 
    $dbName="xxxxxx"; 
    $dbUser="xxxxxxxxxxxxxx"; 
    $dbPass="xxxxxxxxxxx"; 

    $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass); 

    $delete = "DELETE FROM SKU_Group_Dim WHERE Group_ID = '$Group_ID'"; 

    $stmt = $pdo->prepare($delete); 
    $result = $stmt->execute(); 
    echo json_encode($result); 
    if(!$result) { 
     echo json_encode(sqlsrv_errors()); 
    } 

?> 

Answer 1

JavaScript

Zuerst bemerkte ich, dass Sie jQuery verwenden, also warum nicht versuchen, es zu seinem vollen Potenzial zu nutzen? Erstellen Sie einen onclick Event-Handler für Ihre .delete-Schaltflächen.

$('.delete').click(function() { 
    // do something when delete button is clicked 
}); 

Sie wollen nur die Zeile löschen, nachdem der Benutzer bestätigt hat UND es aus der Datenbank erfolgreich gelöscht wurde.

if (confirm('Are you sure you want to delete this entry?')) { 
    // shorter call for doing simple POST request 
    $.post('delete.php', data, function (response) { 
     // do something with response 
    }, 'json'); 
    //^to indicate that the response will be of JSON format 
} 

Aber was data sollte in die $.post() weitergegeben werden, so dass wir wissen, welche Datensatz zu löschen? Nun, wahrscheinlich die ID des Datensatzes, den wir löschen wollen.

HTML

Wie Sie nicht viel von der HTML geschrieben haben, lassen Sie uns annehmen, dass Sie Ihren Tisch wie unten gebaut:

<table class="skuTable"> 
    <tr> 
     <td>123</td><!-- sku group --> 
     <td>456</td><!-- group id --> 
     <td><input type="button" class="edit" name="edit" value="Edit" ... ></td> 
     <td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td> 
    </tr> 
    <!-- more similar records --> 
</table> 

ändern es so, dass Sie sich einfach und die ID Zugang finden B. indem Sie eine Klasse zu Ihren Zellen hinzufügen. (Da wir bereits eine onclick Handler erstellt, die Sie nicht mehr benötigen onclick Attribut für Ihre .delete Tasten verwenden.)

<table class="skuTable"> 
    <tr> 
     <td class="skuGroup">123</td> 
     <td class="groupId">456</td> 
     <td><input type="button" class="edit" name="edit" value="Edit" ... ></td> 
     <td><input type="button" class="delete" value="Delete"></td> 
    </tr> 
    <!-- more similar records --> 
</table> 

JavaScript (wieder)

Sie einfach die zugehörige ID finden können durch das Durchlaufen jQuery verwenden. Um alles zusammen jetzt zu setzen:

$('.delete').click(function() { 
    var button = $(this), 
     tr = button.closest('tr'); 
    // find the ID stored in the .groupId cell 
    var id = tr.find('td.groupId').text(); 
    console.log('clicked button with id', id); 

    // your PHP script expects GROUP_ID so we need to pass it one 
    var data = { GROUP_ID: id }; 

    // ask confirmation 
    if (confirm('Are you sure you want to delete this entry?')) { 
     console.log('sending request'); 
     // delete record only once user has confirmed 
     $.post('delete.php', data, function (res) { 
      console.log('received response', res); 
      // we want to delete the table row only we received a response back saying that it worked 
      if (res.status) { 
       console.log('deleting TR'); 
       tr.remove(); 
      } 
     }, 'json'); 
    } 
}); 

PHP

Einer der Gründe dafür ist, Menschen vorbereitete Anweisungen verwenden, um Angriffe zu verhindern. Es ist gut, dass Sie versucht haben, es zu benutzen, aber Sie benutzen es nicht richtig (lesen Sie Jay's Kommentar). Sie möchten die Variable an einen Parameter in Ihrem SQL binden.Sie können dazu ein Array der Variablen in der PDOStatement::execute()-Funktion übergeben.

Wenn Sie einen Datensatz löschen, prüfen Sie, ob er funktioniert, indem Sie die Anzahl der betroffenen Datensätze mit PDOStatement::rowCount() überprüfen.

Ich hatte nie einen Grund zu überprüfen, ob execute() funktioniert oder nicht.

Natürlich wurde dies nicht getestet, so dass es einige Bugs geben kann. Wenn Sie das Konsolenprotokoll Ihres Browsers öffnen, können Sie den Protokollen folgen, um zu sehen, was passiert.