Postingan lainnya
Laravel Ajax Update Error
Siang gan, mau tanya tentang ajax update di laravel pakai 1 modal buat create sama edit. Proses create berhasil, edit (buat munculin data di modal) berhasil, pas klik simpan buat update malah yang jalan create, jadinya malah nambah data baru.
Route
Route::put('/dashboard/bidang-tugas/update', [Bidang_TugasController::class, 'update'])->middleware('auth')->name('update_data');
Edit button
<a href="#" id="{{ $dbt->slug }}" class="btn btn-warning edit-button me-2" data-bs-tooltip="tooltip" data-bs-placement="top" data-bs-title="Ubah" data-bs-toggle="modal" data-bs-target="#tambahBidangTugasModal"><i class="fa-solid fa-pencil"></i></a>
Controller
public function update(Request $request, Bidang_Tugas $bidang_tuga)
{
$rules = [
'bidang_tugas' => 'required|unique:bidang_tugas|max:100',
];
$validatedData = $request->validate($rules);
$validatedData['slug'] = str_replace(' ', '-', $request->bidang_tugas);
Bidang_Tugas::where('id', $bidang_tuga->id)->update($validatedData);
return response()->json([
'status' => 200,
]);
}
Modal
<div class="modal fade" id="tambahBidangTugasModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah {{ $title }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="#" method="POST" id="tambah_bidang_tugas_form" enctype="multipart/form-data">
@csrf
<div class="modal-body p-4 bg-light">
<div class="mb-3">
<label for="bidang_tugas" class="form-label">Bidang Tugas</label>
<input type="text" class="form-control" id="bidang_tugas" name="bidang_tugas" autofocus>
<div id="error-bidang-tugas" class="invalid-feedback">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary me-2" data-bs-dismiss="modal">Batal</button>
<button type="submit" id="bidang_tugas_simpan" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
Script edit dan update
// Script edit data
$(document).on('click', '.edit-button', function(e) {
e.preventDefault();
let slug = $(this).attr('id');
$.ajax({
url: `/dashboard/bidang-tugas/${slug}/edit`,
method: 'get',
success: function(response) {
$("#slug").val(response.slug);
$("#bidang_tugas").val(response.bidang_tugas);
}
});
});
// Script update data
$("#tambah_bidang_tugas_form").submit(function(e) {
e.preventDefault();
let slug = $(this).attr('id');
const fd = new FormData(this);
fd.append('slug', slug);
$("#bidang_tugas_simpan").text('Simpan');
$.ajax({
url: '/dashboard/bidang-tugas/update',
method: 'put',
data: fd,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(response) {
if (response.status == 200) {
Toastify({
text: "Data berhasil diubah!",
duration: 5000,
newWindow: true,
gravity: "top",
position: "center",
stopOnFocus: true,
style: {
background: "#71dd37",
},
}).showToast();
fetchAllEmployees();
}
$("#bidang_tugas_simpan").text('Simpan');
$("#tambah_bidang_tugas_form")[0].reset();
$("#tambahBidangTugasModal").modal('hide');
}
});
});
2 Jawaban:
Ada beberapa kemungkinan kenapa Ajax update pada Laravel tidak berhasil
-
Apakah kamu menggunakan id yang sama antara create dan update? Di HTML, id digunakan untuk satu elemen. Sebaiknya gunakan id yang berbeda antara create dan update
-
Cek di console network, (klik kanan > inspect > pilih tab network) saat kamu klik tombol apakah sudah ke route yang benar? dengan data data payload yang benar?
Tanggapan
- Pake ID beda gan, modalnya sendiri2. Modal create sendiri, modal edit sendiri.
- Waktu cek di f12 > xhr, pask klik tombol edit, muncul nya edit trus pas klik simpan muncul create.
Nah pas simpannya itu. coba pada saat klik tombol update/save di update. Apa yang kamu lihat di consolenya, apa ketarangannya. Klik di tab network, di bagian yang error. (tips: buka dulu tabnya baru klik tombolnya)
Sekarang malah alur updatenya jalan tapi data gk ke update. Di XHR > Preview cuma muncul status: 200.
saran saya coba debug baik2. Kita ngga tahu kenapa jalan kenapa ngga jalan, karena ngga tahu kode kamu seutuhnya.
Coba dd (die dump) di backend, pastikan semua data sudah ada. pada saat melakukan update request
die dump $bidang_tugas, apakah sudah sesuai yang kamu mau (paramternya) begitu juga dengan isi $request nya.
Waktu di DD data barunya muncul gan, tapi ya itu tadi gk mau ke update ke DB.
DD lagi di controller update baris paling atas dd($bidang_tuga->id); dapetnya null // app/Http/Controllers/Bidang_TugasController.php:129. ID kosong ternyata.
nah disitu bisa terlihat setelah debug pelan-pelan salahnya di mana. Berarti belum nyambung data yang kamu kirim dan kamu "mau" terima.
Cek payload (data yang terkirim) saat melakukan ajax, dengan cara yang sama di network tab, cek di sana data apa yang terkirim, dan sesuaikan yang kamu mau, mungkin hanya id saja atau slug saja, nanti di backend baru disesuaikan
Data barunya muncul di payload gan _token: lv0M8RNOhF06ZTLy1XkZfvqhKPHAaUBdQ4esENlX _id: 32 bidang_tugas: data update _id: 32
coba akses data data tersebut dari $request, dd($request) lihat semuanya ada disana harusnya, tanpa perlu parameter $bidang_tuga
Udah bisa ini gan. Ganti di bagian controller dari: Bidang_Tugas::where('id', $bidang_tuga->id)->update($validatedData); ke Bidang_Tugas::find($request->id)->update($validatedData);
silahkan ditulis sebagai "jawaban" salahnya apa dan solusinya. Lalu ditandai sebagai jawaban benar. Terima kasih
Jawaban Terpilih
Ganti baris ini dibagian controller
Bidang_Tugas::where('id', $bidang_tuga->id)->update($validatedData);
Menjadi
Bidang_Tugas::find($request->id)->update($validatedData);