Как реализовать операцию CRUD с jQUery? - PullRequest
Новая
       4

Как реализовать операцию CRUD с jQUery?

0 голосов
/ 13 апреля 2020

Я только что создал (классический) список пользователей, используя CRUD только с PHP, (bootstrap) и MySQL. Все работает хорошо.

Но когда я пытаюсь использовать jQuery, чтобы избежать обновления sh страниц при выполнении операций, я сталкиваюсь с некоторыми ошибками, которые не могу устранить.

I ' Я могу создавать / вставлять новых пользователей без проблем, но удаление работает только один раз. Я могу удалить запись, нажав кнопку, и она исчезнет из списка на странице и из базы данных и покажет новый список без только что удаленного пользователя. Но когда я пытаюсь удалить другого пользователя в списке, ничего не происходит. И модальный bootstrap всегда загружает данные предыдущего удаленного пользователя.

Я думаю, что это что-то с перезагрузкой переменной, но я не могу найти то, что мне нужно сделать.

Вот файлы, вовлеченные в операцию:

Просто выдержка из индекса. php, где отображается список / таблица. 

<?php
require_once 'database.php';
include 'crud-read.php';
include 'modal-delete-user.php';
?>
<html>
        </div>
          <?php echo $output; ?>
      </div>

  <?php include 'scripts.php';?>
</html>

modal-delete-user. php (Это часть модального оповещения для подтверждения удаления) 

<!-- Modal Delete User -->
      <div class="modal-body">
        <form id="form-delete-user">
          <input id="delete-user-id" name="delete-user-id" type="text">

        <p>
          Really delete?
          <strong>
            <span id="delete-user-forename"></span>
            <span id="delete-user-name"></span>
          </strong>?
        </p>
        <p>It cannot be undone!</p>

      </div>

        <button class="btn btn-danger" id="delete-user-submit-button" type="input">
          <i class="fas fa-trash-alt fa-2x" data-toggle="tooltip" id="del-confirm-info"
            title="Exclude user"></i>
        </button>
      </form>

crud-read. php (Используется для выбора пользователей из базы данных и отображения списка пользователей в индексе. php) 

<?php
// Read users
$read_query = "SELECT * FROM users ORDER BY id DESC";
$stmt = $conn->prepare($read_query);
$stmt->execute();

$count = 1;
$output .='<tbody>';

while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
  $output .=
    '<tr>
      <td>'.$count.'</td>
      <td>'.$row->forename.'</td>
      <td>'.$row->name.'</td>
      <td><a class="link-edit-user" id="' . $row->id . '" name="' . $row->id . '" href="#">EDIT</a></td>
      <td>
        <a class="link-delete-user text-danger"
          data-target="#modal-delete-user"
          data-id="'.$row->id.'"
          data-forename="'.$row->forename.'"
          data-name="'.$row->name.'"
          data-toggle="modal" href="#">
            <i class="far fa-trash-alt fa-xs"></i>
        </a>
      </td>
    </tr>';

  $count++;
}

$output .='</tbody>';

crud-delete. php

<?php
require_once 'database.php';

// Delete user
$delete_query = "DELETE FROM users WHERE id = ?";
$stmt = $conn->prepare($delete_query);

$id = $_POST['delete-user-id'];

$stmt->bindParam(1, $id, PDO::PARAM_INT); // id is an integer, that's why PARAM_INT

$stmt->execute();

// Read remaining users and echo table on the page
include 'crud-read.php';
echo $output;

scripts. php (Когда мы нажимаем кнопку удаления, он открывает модал, который запрашивает подтверждение удаления. При нажатии OK он выполняет crud-delete. php) ПРОБЛЕМА: После удаления пользователь / запись это vani sh из списка. Но когда я пытаюсь выполнить ту же операцию еще раз, открывается модальное окно с данными первого удаленного пользователя, но с id (не от первого удаленного пользователя и не от нового пользователя, которого нужно удалить). 

<!-- jQuery -->
<script>
$(document).ready(function() {
    // Confirm user deletion
    $(".link-delete-user").click(function() {
        event.preventDefault();
        var db = $(this).attr('data-id');
        $("#delete-user-id").val(db);
        $("#delete-user-forename").text($(this).attr('data-forename'));
        $("#delete-user-name").text($(this).attr('data-name'));
        $("#modal-delete-user").modal("show");
  });
    // Delete user
    $("#form-delete-user").on('submit', function() {
        event.preventDefault();
        $.ajax({
            url: "crud-delete.php",
            type: "POST",
            data: $('#form-delete-user').serialize(),
            success: function(resp) {
                $('#form-delete-user')[0].reset();
                $('#modal-delete-user').modal('hide');
                $('#table-users').html(resp);
      }
    });
  });

});
</script>

Есть советы?

1 Ответ

1 голос
/ 13 апреля 2020

Проблема с кнопкой отправки, работающей только один раз, заключается в том, что когда вы добавляете прослушиватель событий при загрузке, он прикрепляется к каждой соответствующей кнопке на экране в это время. Но после перезагрузки списка отображаются новые кнопки.

Просто измените прослушиватели событий на: 

$(document).on("click",".link-delete-user", function() {

$(document).on("submit","#form-delete-user", function() {
...