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');
                }
            });
        });
avatar taraniskai13
@taraniskai13

16 Kontribusi 15 Poin

Diperbarui 9 bulan yang lalu

2 Jawaban:

Ada beberapa kemungkinan kenapa Ajax update pada Laravel tidak berhasil

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

  2. 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?

avatar hilmanski
@hilmanski

2670 Kontribusi 2132 Poin

Dipost 9 bulan yang lalu

Tanggapan

  1. Pake ID beda gan, modalnya sendiri2. Modal create sendiri, modal edit sendiri.
  2. 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);
avatar taraniskai13
@taraniskai13

16 Kontribusi 15 Poin

Dipost 9 bulan yang lalu

Login untuk ikut Jawaban