Postingan lainnya
modal crud pada tailwindcss
kan aku mau bikin modal crud pakai tailwind, nah tapi saat button editnya di klik ambil datanya belum dinamis, jadi misal klik edit data ke 2 tapi yang keganti data yang pertama. bagaimana ya solusinya
sc codingan modalnya
1 Jawaban:
<div>Untuk membuat data menjadi dinamis, kamu perlu melewatkan ID data yang ingin kamu edit ke dalam modal. Kamu dapat melakukannya dengan menambahkan atribut ID pada elemen data dan kemudian melewatkan ID tersebut ke dalam atribut data-id pada modal. Contohnya:<br><br></div><pre>html <table> <tbody> <tr> <td>1</td> <td>John Doe</td> <td>johndoe@example.com</td> <td><button data-id="1">Edit</button></td> </tr> <tr> <td>2</td> <td>Jane Doe</td> <td>janedoe@example.com</td> <td><button data-id="2">Edit</button></td> </tr> </tbody> </table> </pre><div><br>Kemudian, kamu dapat menggunakan atribut data-id untuk mendapatkan ID dari data yang ingin diubah oleh pengguna. Contohnya:<br><br></div><pre>html <div class="modal" id="edit-modal"> <div class="modal-content"> <h2>Edit Data</h2> <form action="/edit" method="post"> <input type="hidden" name="id" value="{{ data.id }}"> <input type="text" name="name" value="{{ data.name }}"> <input type="email" name="email" value="{{ data.email }}"> <button type="submit">Simpan</button> </form> </div> </div> </pre><div><br>Pada modal, kamu dapat menggunakan variabel data.id untuk mendapatkan ID dari data yang ingin diubah oleh pengguna. Kemudian, kamu dapat menggunakan ID tersebut untuk mengambil data dari database. Contohnya:<br><br></div><pre>```javascript
function editData(event) {
event.preventDefault();
// Mendapatkan ID dari data yang ingin diubah oleh pengguna. const id = event.target.dataset.id;
// Mengambil data dari database.
const data = await axios.get(/data/${id});
// Render modal dengan data tersebut.
ReactDOM.render(<EditModal data={data} />, document.getElementById("edit-modal"));
}
```</pre><div><br>Kode ini akan mengambil data dari database dan kemudian merender modal dengan data tersebut. Pengguna dapat mengubah data di dalam modal dan mengklik tombol Simpan untuk menyimpan perubahan.</div>
