Удалить таблицу строк при нажатии кнопки с помощью Ajax

Question

У меня есть таблица HTML, которая имеет 4 столбца: группа SKU, Group_ID, кнопка «Редактировать» и кнопка «Удалить». Теперь я работаю над функцией удаления и хочу, чтобы всякий раз, когда я нажимаю кнопку «Удалить», появляется окно с подтверждением, а затем, если нажата «ОК», она удаляет строку и отправляет запрос удаления, который удаляет его из базы данных.

Я знаю, что я должен использовать Ajax и отдельный PHP-скрипт для запроса на удаление, но не могу понять, как это понять. Любая помощь приветствуется!

HTML для кнопки Delete:

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

JavaScript ... Я знаю, что это нуждается в работе, но я отправляю это ради моего вопроса:

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

Во-первых, я заметил, что вы используете jQuery, так почему бы не попробовать использовать его в полном объеме?

Начните с создания обработчика событий onclick для ваших кнопок .delete.

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

Вы хотите удалить только строку после того, как пользователь подтвердил И он был успешно удален из базы данных.

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 
} 

Но что data должны быть переданы в $.post() так, что мы знаем, какие записи удалить? Ну, вероятно, идентификатор записи, которую мы хотим удалить.

HTML

Как вы не отправили большую часть HTML, давайте предположим, что вы создали таблицу, как показано ниже:

<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> 

изменить его так, что вы можете легко найти и получить доступ к идентификатору группу, например, добавив класс в свои ячейки. (Так как мы уже создали onclick обработчик, вам больше не нужно использовать onclick атрибут для .delete кнопок.)

<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 (снова)

Вы можете легко найти соответствующий идентификатор путем обхода используя jQuery. Для того, чтобы поставить все вместе сейчас:

$('.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

Одна из причин, почему люди используют подготовленные заявления, чтобы предотвратить атаки. Хорошо, что вы пытались его использовать, но вы не используете его правильно (см. Комментарий Джей). Вы хотите привязать переменную к параметру в вашем SQL.Вы можете сделать это, передав массив переменных в функции PDOStatement::execute().

Когда вы удаляете запись, вы проверяете, работает ли она, проверяя количество затронутых записей, используя PDOStatement::rowCount().

У меня никогда не было причин проверять, работает ли execute() или нет.

<?php 
error_reporting(E_ALL); 
ini_set('display_errors', 1); 

//$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); 

$stmt = $pdo->prepare("DELETE FROM SKU_Group_Dim WHERE Group_ID = ?"); 
$stmt->execute(array($Group_ID)); 

// send back the number of records it affected 
$status = $stmt->rowCount() > 0; 

// send back a JSON 
echo json_encode(array('status' => $status)); 

// nothing else can be outputted after this 
?> 

Конечно, это не было протестировано, поэтому может быть несколько ошибок. Если вы откроете консольный журнал своего браузера, вы можете следить за журналами, чтобы узнать, что происходит.