Anang Hariyanto N
Anang Hariyanto N

Reputation: 133

Laravel DB updated 2 row even 1 id given

I don't know what's wrong with my code, i want to update 1 row of my DB, but instead it's updated 2 row at once, i'm using ajax post to update the data

ajax query :

$('#tolak').on('click', function() {
                const id = $(this).attr('data-id')
                const name = $(this).attr('data-name')
                Swal.fire({
                    title: 'Konfirmasi',
                    text: `Apakah anda yakin akan menolak form pendaftaran driver ${name}`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, tolak!',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    Swal.showLoading()
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('admin.verifDriver') }}',
                            type: 'ajax',
                            method: 'post',
                            data: {
                                id: id,
                                status: 2,
                            },
                            success: function(data) {
                                console.log(data)
                                Swal.fire(
                                    'Sukses!',
                                    `Berhasil tolak pendaftaran ${name}`,
                                    'success'
                                )
                                fetchData()
                                Swal.hideLoading()
                            },
                            error: function(e) {
                                Swal.hideLoading()
                            }
                        })
                    }
                })
            })

And here's the controller

public function verif(Request $req)
    {
        DB::table('drivers')
            ->where('id', $req->id)
            ->update([
                'status' => $req->status
            ]);
    }

it's just a simple code, i have done it before on the other project but it works, i don't know what's wrong with this code.

EDIT


Here is my full blade code

@extends('admin.layout.app')
@section('content')
    <div x-data="{ showModal: false }">
        <div class="font-bold text-2xl text-primary-admin mb-8">Form Driver</div>
        <div class="flex flex-row gap-4 w-full mb-4 justify-between">
            <div class="flex flex-row gap-4">
                {{-- Modal Tambah Driver --}}
                <div x-data="{ showModalTambah: false }">
                    <button type="button" @click="showModalTambah = !showModalTambah"
                        class="bg-primary-admin hover:bg-primary-admin-hover rounded-lg text-white py-2 px-5 font-bold transform transition-all ease-linear duration-100">Tambah
                        <span class="mdi mdi-plus-thick"></span>
                    </button>
                    <div x-show="showModalTambah"
                        class="fixed text-primary-admin flex pt-40  justify-center overflow-auto z-50 bg-black bg-opacity-40 top-0 right-0 bottom-0 left-60"
                        x-transition:enter="transition ease duration-300" x-transition:enter-start="opacity-0"
                        x-transition:enter-end="opacity-100" x-transition:leave="transition ease duration-300"
                        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">

                        <!-- Modal -->
                        <div x-show="showModalTambah" class="bg-white rounded-lg shadow-2xl p-6 sm:w-1/2 mx-10 mb-auto"
                            @click.away="showModalTambah = false"
                            x-transition:enter="transition ease duration-150 transform"
                            x-transition:enter-start="opacity-0 scale-90 translate-y-1"
                            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                            x-transition:leave="transition ease duration-150 transform"
                            x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                            x-transition:leave-end="opacity-0 scale-90 translate-y-1">

                            TES
                        </div>
                    </div>
                </div>
                <div id="filter">
                    Show
                    <select id="perPage" onchange="setPerPage()"
                        class="rounded-lg shadow-lg border-none outline-none focus:ring-transparent focus:outline-none focus:ring focus:border-transparent">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="0">All</option>
                    </select>
                </div>
            </div>
            <div>
                <input type="text" placeholder="Cari Data" id="search"
                    class="rounded-lg outline-none border-none focus:outline-none focus:ring focus:ring-primary-admin transform transition-all ease-in-out duration-100 shadow-lg">
            </div>
        </div>
        <section class="w-full mb-4">
            <div class="w-full overflow-x-auto rounded-lg shadow-lg">
                <table class="w-full z-0 text-primary-admin" id="driverTable">
                    <thead>
                        <tr
                            class="font-semibold text-sm text-white bg-primary-admin uppercase border-b border-primary-admin">
                            <th class="px-4 py-3">No</th>
                            <th class="px-4 py-3">Nama</th>
                            <th class="px-4 py-3">Email</th>
                            <th class="px-4 py-3">TTL</th>
                            <th class="px-4 py-3">Alamat</th>
                            <th class="px-4 py-3">Tipe Kendaraan</th>
                            <th class="px-4 py-3">No. Kendaraan</th>
                            <th class="px-4 py-3">Warna</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white text-sm">
                        <div id="loading"
                            class="flex flex-col items-center w-full z-10 absolute bg-primary-white bg-opacity-30">
                            <img src="{{ asset('loading.gif') }}" />
                        </div>
                    </tbody>
                </table>
            </div>
        </section>
        <div id="table-footer" class="flex justify-between">
            <div id="data-info"></div>
            <div id="data-paging" class="flex flex-row gap-2"></div>
        </div>
        <!-- Modal -->

        <!-- Modal Background -->
        <div x-show="showModal"
            class="fixed text-primary-admin flex pt-40  justify-center overflow-auto z-50 bg-black bg-opacity-40 top-0 right-0 bottom-0 left-60"
            x-transition:enter="transition ease duration-300" x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100" x-transition:leave="transition ease duration-300"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">

            <!-- Modal -->
            <div x-show="showModal" class="bg-white rounded-lg shadow-2xl p-6 sm:w-1/2 mx-10 mb-auto"
                @click.away="showModal = false" x-transition:enter="transition ease duration-150 transform"
                x-transition:enter-start="opacity-0 scale-90 translate-y-1"
                x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                x-transition:leave="transition ease duration-150 transform"
                x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                x-transition:leave-end="opacity-0 scale-90 translate-y-1">
                <div class="w-full flex justify-end">
                    <button @click="showModal = !showModal"><span
                            class="mdi mdi-close-thick text-primary-admin"></span></button>
                </div>

                <div id="modalLoading" class="flex w-full justify-center">
                    <img src="{{ asset('loading.gif') }}" />
                </div>
                <div id="modalBody" class="hidden w-full flex-col text-lg" hidden>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">Nama</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="nama">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">Email</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="email">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">TTL</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="ttl">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">Alamat</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="alamat">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">Tipe Kendaraan</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="tipe_kendaraan">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">Merk</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="Merk">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">Tipe</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="tipe">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">Warna</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="warna">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">No. Kendaraan</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="w-8/12" id="no_kendaraan">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">No. KTP</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="flex flex-row justify-between w-8/12" id="no_ktp">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">No. STNK</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="flex flex-row justify-between w-8/12" id="no_stnk">Data</div>
                    </div>
                    <div class="flex flex-row w-full mb-3">
                        <div class="w-3/12 font-bold">No. SIM</div>
                        <div class="w-1/12 font-bold">:</div>
                        <div class="flex flex-row justify-between w-8/12" id="no_sim">Data</div>
                    </div>
                    <!-- Buttons -->
                    <div id="buttonGroupVerif" class="text-right space-x-5 mt-5">
                        <a href="javascript:void(0)" id="tolak" data-id="" data-name=""
                            class="px-4 py-2 text-sm bg-white rounded-xl border transition-colors duration-150 ease-linear border-gray-200 text-gray-500 focus:outline-none focus:ring-0 font-bold hover:bg-red-500 hover:text-white focus:bg-indigo-50 focus:text-indigo">Tolak</a>
                        <a href="javascript:void(0)" id="setuju" data-id="" data-name=""
                            class="px-4 py-2 text-sm bg-white rounded-xl border-2 transition-colors duration-150 ease-linear border-primary-admin text-gray-500 focus:outline-none focus:ring-0 font-bold hover:bg-primary-admin hover:text-white focus:bg-indigo-50 focus:text-indigo">Verifikasi</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script>
        var isLoading = true;
        var page = 1;
        var perPage = 10;
        var pageLimit;
        var search = ''

        function paging(e) {
            page = parseInt(e)
            fetchData()
        }

        function previousPage() {
            if (page > 1) {
                page--
                fetchData()
            }
        }

        function nextPage() {
            if (page < pageLimit) {
                page++
                fetchData()
            }
        }

        toggleLoading()
        fetchData()

        function setPerPage() {
            page = 1
            perPage = $('#perPage').val()
            fetchData()
        }

        function toggleLoading() {
            if (isLoading) {
                $('#loading').removeClass('hidden')
            } else {
                $('#loading').addClass('hidden')
            }
        }

        function callData(e) {
            $('#modalLoading').show()
            $('#modalBody').addClass('hidden')
            $('#modalBody').removeClass('flex')
            $.ajax({
                url: `{{ url('admin/form-driver/show') }}/${e}`,
                method: 'GET',
                type: 'ajax',
                dataType: 'json',
                success: function(data) {
                    $('#modalLoading').hide()
                    $('#modalBody').removeClass('hidden')
                    $('#modalBody').addClass('flex')
                    $('#nama').html(data.driver.name)
                    $('#email').html(data.driver.email)
                    $('#ttl').html(data.driver.birth_date)
                    $('#alamat').html(data.driver.address)
                    $('#tipe_kendaraan').html((data.driver.vehicle_type === 'car') ? 'Mobil' : 'Motor')
                    $('#merk').html(data.driver.brand)
                    $('#tipe').html(data.driver.type)
                    $('#warna').html(data.driver.color)
                    $('#no_kendaraan').html(data.driver.vehicle_number)
                    $('#no_ktp').html(data.driver.ktp_number +
                        ` <a href="${data.photo_ktp}" target="_blank"><span class="text-blue-500 text-xl hover:text-blue-300">Lihat KTP <span class="mdi mdi-open-in-new"></span></span></a>`
                    )
                    $('#no_sim').html(data.driver.sim_number +
                        ` <a href="${data.photo_sim}" target="_blank"><span class="text-blue-500 text-xl hover:text-blue-300">Lihat SIM <span class="mdi mdi-open-in-new"></span></span></a>`
                    )
                    $('#no_stnk').html(data.driver.stnk_number +
                        ` <a href="${data.photo_stnk}" target="_blank"><span class="text-blue-500 text-xl hover:text-blue-300">Lihat STNK <span class="mdi mdi-open-in-new"></span></span></a>`
                    );
                    (data.driver.status == 0) ? $('#buttonGroupVerif').show(): $('#buttonGroupVerif').hide()
                    $('#tolak').attr('data-id', data.driver.id)
                    $('#tolak').attr('data-name', data.driver.name)
                    $('#setuju').attr('data-id', data.driver.id)
                    $('#setuju').attr('data-name', data.driver.name)
                },
                error: function(e) {
                    console.log(e)
                }
            })
        }

        function fetchData() {
            isLoading = true
            toggleLoading()
            $.ajax({
                'url': `{{ url('admin/getDriverJSON') }}?page=${page}&perPage=${perPage}&search=${search}`,
                'type': 'GET',
                'dataType': 'json',
                success: function(data) {
                    isLoading = false;
                    toggleLoading()
                    pageLimit = data.last_page
                    var html = '';
                    var i = 1;
                    var no = (data.current_page == 1) ? 1 : (((data.current_page - 1) * perPage) + 1)
                    data.data.forEach(e => {
                        html +=
                            `<tr>
                                    <td class="px-4 py-3 border">${no}</td>
                                    <td class="px-4 py-3 border">${e.name}</td>
                                    <td class="px-4 py-3 border">${e.email}</td>
                                    <td class="px-4 py-3 border">${e.birth_date}</td>
                                    <td class="px-4 py-3 border">${e.address}</td>
                                    <td class="px-4 py-3 border">${(e.vehicle_type === 'car') ? 'Mobil' : 'Motor'}</td>
                                    <td class="px-4 py-3 border">${e.vehicle_number}</td>
                                    <td class="px-4 py-3 border">${e.color}</td>
                                    <td class="px-4 py-3 border">${(e.status == 0 ? 'Belum Diverifikasi' : (e.status == 1) ? 'Diterima' : 'Ditolak')}</td>
                                    <td class="px-4 py-3 border flex flex-row justify-center">
                                        <a href="javascript:void(0)" id="view" @click="showModal = !showModal; callData(${e.id})"><span class="mdi mdi-eye text-xl"></span></a>
                                    </td>
                                </tr>`
                        no++
                    });
                    $('#driverTable tbody').html(html)
                    var nav = ''
                    data.links.forEach((e, index) => {
                        var active = (e.active) ? 'bg-primary-admin text-white' :
                            'bg-white text-primary-admin hover:bg-primary-admin hover:text-white'
                        var disabled = 'bg-white text-gray-300 cursor-default'
                        nav +=
                            `<button class="px-4 py-3 ${(e.url == null) ? disabled : active} rounded-md shadow-md transform transition-all ease-in-out duration-100" onClick="${index == 0 ? 'previousPage()' : index == (data.links.length - 1) ? 'nextPage()' : `paging(${e.url.split("=")[1]})`}">${e.label}</button>`
                    });
                    $('#data-paging').html(nav)

                    $('#data-info').html(
                        `<span>Showing ${data.from} to ${data.to} from ${data.total} data</span>`
                    )
                },
                error: function(e) {
                    console.log(e)
                }
            })
        }

        $(document).ready(function() {
            function debounce(callback, wait) {
                let timeout;
                return (...args) => {
                    clearTimeout(timeout);
                    timeout = setTimeout(function() {
                        callback.apply(this, args);
                    }, wait);
                };
            }

            $('#search').on('input', debounce((e) => {
                search = e.target.value
                fetchData()
            }, 500))

            function toggleModal() {
                $('#driverModal').toggleClass('hidden')
                $('#driverModal').toggleClass('flex')
            }

            $('#close-modal').on('click', function() {
                toggleModal()
            })
            $('#modal-bg').on('click', function() {
                toggleModal()
            })

            $('#tolak').on('click', function() {
                const id = $(this).attr('data-id')
                const name = $(this).attr('data-name')
                Swal.fire({
                    title: 'Konfirmasi',
                    text: `Apakah anda yakin akan menolak form pendaftaran driver ${name}`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, tolak!',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    Swal.showLoading()
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('admin.verifDriver') }}',
                            type: 'ajax',
                            method: 'post',
                            data: {
                                id: id,
                                status: 2,
                            },
                            success: function(data) {
                                console.log('sukses update');
                                Swal.fire(
                                    'Sukses!',
                                    `Berhasil tolak pendaftaran ${name}`,
                                    'success'
                                )
                                fetchData()
                            },
                            error: function(e) {
                                console.log(e)
                                Swal.hideLoading()
                            }
                        })
                    }
                })
            })

            $('#setuju').on('click', function() {
                const id = $(this).attr('data-id')
                const name = $(this).attr('data-name')
                Swal.fire({
                    title: 'Konfirmasi',
                    text: `Apakah anda yakin akan menerima form pendaftaran driver ${name}`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, terima!',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('admin.verifDriver') }}',
                            type: 'ajax',
                            method: 'post',
                            data: {
                                'id': id,
                                'status': 1,
                            },
                            success: function(data) {
                                console.log('sukses update');
                                Swal.fire(
                                    'Sukses!',
                                    `Berhasil menerima pendaftaran ${name}`,
                                    'success'
                                )
                                fetchData()
                            },
                            error: function(e) {
                                console.log(e)
                                Swal.hideLoading()
                            }
                        })
                    }
                })
            })
        })
    </script>
@endsection

Upvotes: 0

Views: 100

Answers (2)

Mad an
Mad an

Reputation: 159

Select single data, modify it and save like

public function verif(Request $req)
{
    $model=Driver::where('id', $req->id)->first();
    $model->status=$req->status;
    $model->save();
}

Upvotes: 1

Trusha Paradkar
Trusha Paradkar

Reputation: 13

Try to update with eloquent model instead of DB.

public function verif(Request $req)
{
    Driver::where('id', $req->id)
        ->update([
            'status' => $req->status
        ]);
}

Dont forget to import Driver namespace.

Upvotes: 0

Related Questions