Halaman web saya memiliki tabel dengan data yang diambil dari database - itu cukup banyak tiruan dari database. Setiap baris dalam tabel memiliki satu tombol hapus dan satu tombol perbarui, yang memungkinkan pengguna untuk menghapus baris database masing-masing, atau memperbarui kolom menggunakan formulir yang disediakan.

Masalah saya adalah tombol hapus dan perbarui tidak berfungsi dengan baik. Klik pertama membuat perubahan yang sesuai ke database, tetapi tabel tetap tidak berubah sampai tombol diklik untuk kedua kalinya.

let loadUsers = function () {
fetch("http://localhost:8080/users").then(function (response) {
    response.json().then(function (data) {
    // generate table and delete/update button html
    data.forEach(function (user) {
        deleteButton = document.querySelector("#btn-del-user);
        deleteButton.onclick = function () {
        if (confirm("Are you sure you want to delete " + user.firstname + "?")) {
            deleteUser(user.id);
            loadUsers();
        }
        });
    }
    });
};

loadUsers();


document.addEventListener('submit', function(event) {
  if (!event.target.matches('#update-user-form')) return;

  let elements = document.querySelector('#update-user-form').elements;
  let inputs = {
    "firstName": elements.firstName.value,
    "lastName": elements.lastName.value,
    "email": elements.email.value,
    "password": elements.password.value
  };
  let body = "";

  // create a URL-encoded string from form inputs
  Object.keys(inputs).forEach(function (key, i) {
    body += key + "=" + encodeURIComponent(inputs[key]);
    if (i < Object.keys(inputs).length - 1) {
      body += "&";
    }
  });

  let id = elements["user-id"].value;

  fetch('http://localhost:8080/users/' + id, {
    method: 'UPDATE',
    body: body,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

loadUsers();
});

Bagian yang aneh adalah saya memiliki formulir terpisah di halaman yang memungkinkan saya menambahkan baris baru ke tabel/basis data, dan pendengar untuk formulir itu juga memanggil loadUsers(), tetapi itu berhasil memperbarui DOM setelah satu klik.

-2
Grav 29 Oktober 2019, 03:16

1 menjawab

Jawaban Terbaik

LoadUsers harus menunggu pembaruan/penghapusan selesai sebelum memuat pengguna lagi

Mencoba

fetch('http://localhost:8080/users/' + id, {
    method: 'UPDATE',
    body: body,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
}).then(loadUsers);
1
Bravo 29 Oktober 2019, 00:45