halaman tidak tereload sehingga tabel tidak terupdate

Selamat Sore, saya punya script kode kurang lebih seperti ini:

function getDetailUser(ubahid) {
            $('#ubahidUser').val(ubahid);
            $.ajax({
                url: 'user/ubah.php',
                type: 'post',
                data: {
                    ubahid: ubahid
                },
                success: function(data, status) {
                    var userId = JSON.parse(data);
                    $('#ubahidUser').val(userId.idUser);
                    $('#ubahuserName').val(userId.userName);
                    $('#ubahpassword').val(userId.password);
                    $('select[name = ubahidUker]').val(userId.idUker);
                    $('#ubahidUker').selectpicker('refresh');
                    $('#ubahlevelUser').val(userId.levelUser);
                },
            });
            $('#modalubahUser').modal('show');
        };

        $(document).on('click', '#updateUser', function() {
            var idUser = $('#ubahidUser').val();
            var userName = $('#ubahuserName').val();
            var password = $('#ubahpassword').val();
            var idUker = $('#ubahidUker').val();
            var levelUser = $('#ubahlevelUser').val();
            $.ajax({
                url: 'user/update.php',
                type: 'post',
                data: {
                    idUserUpdate: idUser,
                    userNameUpdate: userName,
                    passwordUpdate: password,
                    idUkerUpdate: idUker,
                    levelUserUpdate: levelUser
                },
                success: function(data, status) {
                        console.log(status);
                }
            });
            $('#modalubahUser').modal('hide');
        });

ketika saya klik #updateUser, data terupdate akan tetapi tabel tidak ter reload.ketika saya refresh halaman, muncul alert seperti ini:

image.pngimage.png
kira-kira apa yang menyebabkan ini terjadi ya?



avatar ruben46

@ruben46

17 Kontribusi 0 Poin

  • tujuannya mau apa? kendalanya seperti apa? apa yang sudah dilakukan? biasakan buat pertanyaan sedetail mungkin agar bisa dipahami oleh member lain yang mau membantu. - @ahanafi
  • mohon maaf kak jika pertanyaan dan kendala saya kurang jelas.saya sudah uraikan lagi kendala saya.semoga berkenan membantu. - @ruben46


Jawaban Terpilih

#updateUser itu sebuah tag hyperlink? Coba tambahin di eventlistener nya preventDefault.  

$(document).on('click', '#updateUser', function(event) {
    event.preventDefault()
    ..
    .
avatar GrennKren

@GrennKren

60 Kontribusi 44 Poin

Jawaban

function getDetailUser(ubahid) {
            $('#ubahidUser').val(ubahid);
            $.ajax({
                url: 'user/ubah.php',
                type: 'post',
                data: {
                    ubahid: ubahid
                },
                success: function(data, status) {
                    var userId = JSON.parse(data);
                    $('#ubahidUser').val(userId.idUser);
                    $('#ubahuserName').val(userId.userName);
                    $('#ubahpassword').val(userId.password);
                    $('select[name = ubahidUker]').val(userId.idUker);
                    $('#ubahidUker').selectpicker('refresh');
                    $('#ubahlevelUser').val(userId.levelUser);
                },
            });
            $('#modalubahUser').modal('show');
        };

        $(document).on('click', '#updateUser', function() {
            var idUser = $('#ubahidUser').val();
            var userName = $('#ubahuserName').val();
            var password = $('#ubahpassword').val();
            var idUker = $('#ubahidUker').val();
            var levelUser = $('#ubahlevelUser').val();
            $.ajax({
                url: 'user/update.php',
                type: 'post',
                data: {
                    idUserUpdate: idUser,
                    userNameUpdate: userName,
                    passwordUpdate: password,
                    idUkerUpdate: idUker,
                    levelUserUpdate: levelUser
                },
                success: function(data, status) {
                    location.reload();
                }
            });
            $('#modalubahUser').modal('hide');
        });
avatar ruben46

@ruben46

17 Kontribusi 0 Poin


#updateUser itu sebuah tag hyperlink? Coba tambahin di eventlistener nya preventDefault.  

$(document).on('click', '#updateUser', function(event) {
    event.preventDefault()
    ..
    .
avatar GrennKren

@GrennKren

60 Kontribusi 44 Poin

  • bukan hyperlink kak.tapi tombol untuk menyimpan data di modal ubah data.sudah saya rinci kendala saya di bawah kak.smoga berkenan membantu. - @ruben46


mohon maaf kak @hanafi.pertanyaan dan kendala saya jika kurang jelas.saya takut pertanyaan saya terlalu panjang.tapi saya coba diuraikan lagi.smoga berkenan membantu.

saya punya page dengan tabel kurang lebih seperti ini:

<div class="card">
        <div class="card-header">
            <H6>DATA USER</H6>
            <!-- Tombol Tambah User -->
            <button type="button" class="btn btn-success mt-2 btn-sm" data-bs-toggle="modal" data-bs-target="#modaltambahUser"><i class="fa-solid fa-plus"></i> Tambah
            </button>
            <a class="btn btn-info mt-2 btn-sm" type="button" href="user/cetak.php" target="_blank">Cetak Laporan
            </a>
            <a class="btn btn-danger mt-2 btn-sm" type="button" href="user/cetakexcel.php" target="_blank">Cetak Excel
            </a>
        </div>
        <div class="card-body">
            <table id="example" class="table table-responsive table-sm table-bordered table-striped">
                <thead class="table-secondary">
                    <tr>
                        <th class="text-center" width="5%">No</th>
                        <th class="text-center" width="20%">Username</th>
                        <th class="text-center" width="50%">Unit Kerja</th>
                        <th class="text-center" width="20%">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $no = 1;
                    $query = mysqli_query($koneksi, "SELECT * FROM user INNER JOIN uker ON user.idUker=uker.idUker ORDER BY idUser ASC");
                    while ($hasil = mysqli_fetch_array($query)) {
                        echo '<tr>
                <td class="text-center">' . $no++ . '</td>
                <td>' . $hasil['userName'] . '</td>
                <td>' . $hasil['namaUker'] . '</td>
                <td class="text-center">
                <button id="btnubahUser" type="button" class="btn btn-warning btn-sm" onclick="getDetailUser(' . $hasil['idUser'] . ')">Ubah</button>
                <button type="button" class="btn btn-danger btn-sm" onclick="hapusUser(' . $hasil['idUser'] . ')">Hapus</button>
                </td>
                </tr>';
                    }
                    ?>
                </tbody>

            </table>
        </div>
    </div>

lalu saya punya modal tambah data seperti ini:

<div class="modal fade" id="modaltambahUser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modaltambahUserLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="user/tambah.php" method="post">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title" id="modaltambahUserLabelHeader">Tambah User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="idUser" class="form-label fw-bold" hidden>ID User</label>
                            <input type="text" class="form-control form-control-sm" id="idUser" name="idUser" aria-describedby="idUser" hidden>
                        </div>
                        <div class="mb-3">
                            <label for="userName" class="form-label fw-bold">Username</label>
                            <input type="text" class="form-control form-control-sm" id="userName" name="userName" aria-describedby="userName" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label fw-bold">Password</label>
                            <input type="password" class="form-control form-control-sm" id="password" name="password" aria-describedby="password" required autocomplete="off">
                        </div>
                        <div class="mb-3">
                            <label for="idUker" class="form-label fw-bold">Unit Kerja</label>
                            <select id="idUker" name="idUker" class="form-select form-select-sm" aria-label="Default select example">
                                <option disabled selected> --Pilih Unit Kerja-- </option>
                                <?php
                                $pilihUker = mysqli_query($koneksi, "SELECT * FROM uker ORDER BY idUker ASC");
                                while ($row = mysqli_fetch_array($pilihUker)) {
                                ?>
                                    <option value="<?php echo $row['idUker'] ?>"><?php echo $row['namaUker'] ?></option>
                                <?php
                                };
                                ?>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="levelUser" class="form-label fw-bold">Level User</label>
                            <select id="levelUser" name="levelUser" class="form-select form-select-sm" aria-label="Default select example">
                                <option disabled selected> --Pilih Level User-- </option>
                                <option value="1">Level 1</option>
                                <option value="99">Level 99</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" type="button" class="btn btn-primary btn-success btn-sm" id="simpanUser" name="simpanUser">Simpan</button>
                        <button type="reset" class="btn btn-warning btn-sm">Batal</button>
                        <button type="button" class="btn btn-secondary btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

dan modal ubah data seperti ini:

<div class="modal fade" id="modalubahUser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalubahUserLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" method="post">
                    <div class="modal-header bg-warning">
                        <h5 class="modal-title" id="modalubahUserLabelHeader">Ubah User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="ubahidUser" class="form-label fw-bold" hidden>ID User</label>
                            <input type="text" class="form-control form-control-sm" id="ubahidUser" name="ubahidUser" aria-describedby="ubahidUser" hidden>
                        </div>
                        <div class="mb-3">
                            <label for="ubahuserName" class="form-label fw-bold">Username</label>
                            <input type="text" class="form-control form-control-sm" id="ubahuserName" name="ubahuserName" aria-describedby="ubahuserName" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahpassword" class="form-label fw-bold">Password</label>
                            <input type="ubahpassword" class="form-control form-control-sm" id="ubahpassword" name="ubahpassword" aria-describedby="ubahpassword" required autocomplete="off">
                        </div>
                        <div class="mb-3">
                            <label for="ubahidUker" class="form-label fw-bold">ubahidUker</label>
                            <select id="ubahidUker" name="ubahidUker" class="form-select form-select-sm" aria-label="Default select example">
                                <?php
                                $pilihUker = mysqli_query($koneksi, "SELECT * FROM uker ORDER BY idUker ASC");
                                while ($row = mysqli_fetch_array($pilihUker)) {
                                ?>
                                    <option value="<?php echo $row['idUker'] ?>"><?php echo $row['namaUker'] ?></option>
                                <?php
                                };
                                ?>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="ubahlevelUser" class="form-label fw-bold">Level User</label>
                            <select id="ubahlevelUser" name="ubahlevelUser" class="form-select form-select-sm" aria-label="Default select example">
                                <option value="1">Level 1</option>
                                <option value="99">Level 99</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" type="button" class="btn btn-primary btn-success btn-sm" id="updateUser" name="updateUser">Simpan</button>
                        <button type="button" class="btn btn-secondary btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

fungsi yang saya pakai untuk menyimpan data kurang lbih seperti ini:

<script>
        function hapusUser(hapusid) {
            Swal.fire({
                title: 'Yakin?',
                text: "Anda Akan Menghapus Data Ini!",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Hapus!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: 'user/hapus.php',
                        type: 'post',
                        data: {
                            idUserHapus: hapusid
                        },
                        success: function(data, status) {
                            Swal.fire(
                                'Terhapus!',
                                'Data Sudah Dihapus',
                                'success'
                            ).then(function() {
                                location.reload()
                            });
                        }
                    });
                }
            })

        }

        function getDetailUser(ubahid) {
            $('#ubahidUser').val(ubahid);
            $.ajax({
                url: 'user/ubah.php',
                type: 'post',
                data: {
                    ubahid: ubahid
                },
                success: function(data, status) {
                    var userId = JSON.parse(data);
                    $('#ubahuserName').val(userId.userName);
                    $('#ubahpassword').val(userId.password);
                    $('#ubahidUker').val(userId.idUker);
                    $('#ubahlevelUser').val(userId.levelUser);
                },
            });
            $('#modalubahUser').modal('show');
        }

        $(document).on('click', '#updateUser', function() {
            var idUser = $('#ubahidUser').val();
            var userName = $('#ubahuserName').val();
            var password = $('#ubahpassword').val();
            var idUker = $('#ubahidUker').val();
            var levelUser = $('#ubahlevelUser').val();
            $.ajax({
                url: 'user/update.php',
                type: 'post',
                data: {
                    idUserUpdate: idUser,
                    userNameUpdate: userName,
                    passwordUpdate: password,
                    idUkerUpdate: idUker,
                    levelUserUpdate: levelUser
                },
                success: function(data, status) {
                    Swal.fire(
                        'Berhasil!',
                        'Data Sudah Diupdate',
                        'success'
                    ).then(function() {
                        window.location.reload();
                    })
                },
            });
            $('#modalubahUser').modal('hide');
        });

        $(document).ready(function() {
            $('#example').DataTable();
        });
    </script>

masalah terjadi ketika saya mau ubah data melalui modal ubah.saat saya menyimpan data di form ubah dengan menekan tombol #updateUser,data di database berubah sesuai nilai di form.tapi data yang tampil di tabel,tidak langsung berubah.saat saya refresh halaman,notif resubmission terus muncul.masalah ini terjadi di page yang ada form control tipe select option,sementara di halaman yang tidak ada form control select option,tidak ada masalah.mohon bantuannya.
avatar ruben46

@ruben46

17 Kontribusi 0 Poin

  • Aku tidak tau Swal.fire fungsinya untuk apa. Tapi yg pasti.. window.location.reload() ini memang beneran tidak pernah tereksekusi, mungkin swal.fire pun juga sama. - @GrennKren
  • Seperti jawaban ku sebelumnya. Kamu perlu menambhain preventDefault. Karena #updateUser mu itu berupa button type submit - @GrennKren
  • Yg mana sekali diklik akan langsung berubah halaman nya sesusi parameter action di tag form - @GrennKren

Tampikan semua |


Login untuk gabung berdiskusi