Saya menggunakan datatables, dalam satu kolom saya memiliki tombol yang digunakan untuk menghapus. Mengklik tombol ini perlu menampilkan modal, yang kemudian menunjukkan YA/TIDAK untuk menghapus baris.

Saya berhasil membuat modal berfungsi tetapi saya tidak bisa mendapatkan javascript untuk mengambil id saya sama sekali. Itu tidak mendaftarkan acara klik.

Ini adalah kode yang saya miliki (saya menghilangkan bagian kode yang jelas, misalnya tabel):

echo "<td>";
                    $deletetitle = lang('general_delete');
                    echo "<button class=\"btn btn-secondary rowBtnDelete\" data-toggle=\"modal\" data-target=\"#deletemodal\" data-vacid=\"$vac->vacancy_id\" data-userid=\"$this->auth_user_id\">$deletetitle</button>";
                    echo "</td>";

Kode modal:

<!-- Modal dialog for the deletion confirmation -->
<?php
$delAction = 'dashboard/deleteVacancy';
?>
<div id="deletemodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="title-delete" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form class="modal-content" action="<?=site_url( $delAction, $link_protocol )?>" method="post" data-class="validation">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span class="fa fa-times" aria-hidden="true"></span>
                </button>
                <h4 class="modal-title" id="title-duplicate">verwijderen?</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <?php echo form_submit('deletebtn', lang("general_yes"), "class='btn btn-secondary'");  ?>
                <a id="delcancelmodal" class="btn btn-secondary" data-dismiss="modal"><?=lang("general_no")?></a>
            </div>
        </form>
    </div>
</div>

Sekarang ketika saya melakukan hal berikut dalam javascript tidak ada yang terjadi (saya berharap peringatan muncul ??):

$(document).ready(function () {
    $('button.rowBtnDelete').on('click', function (e) {
        e.preventDefault();
        //var id = $(this).closest('tr').data('id');
        //$('#deletemodal').data('id', id).modal('show');
        alert("pls");
    });
});

EDIT: kode konfigurasi yang dapat didata terlihat seperti ini: //DataTables di halaman "lowongan saya" untuk organisasi

var table = $('#table_id').DataTable({
    "language": {
        "decimal":        "",
        "emptyTable":     "Geen data gevonden in tabel",
        "info":           "Toon _START_ tot _END_ van de _TOTAL_ activiteiten",
        "infoEmpty":      "Toon 0 tot 0 van de 0 activiteiten",
        "infoFiltered":   "(gefilterd van _MAX_ totale activiteiten)",
        "infoPostFix":    "",
        "thousands":      ",",
        "lengthMenu":     "Toon _MENU_ activiteiten",
        "loadingRecords": "Loading...",
        "processing":     "Processing...",
        "search":         "Zoeken:",
        "zeroRecords":    "Geen resultaten gevonden voor je zoekopdracht",
        "paginate": {
            "first":      "Eerste",
            "last":       "Laatste",
            "next":       "Volgende",
            "previous":   "Vorige"
        },
        "aria": {
            "sortAscending":  ": klik om de kolom oplopend te sorteren",
            "sortDescending": ": klik om de kolom aflopend te sorteren"
        }
    },
    "order": [[ 1, "desc" ]],
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'copy',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        },
        {
            extend: 'excel',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        },
        {
            extend: 'pdfHtml5',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
            }
        }
    ],
    "pagingType": "full_numbers",
    drawCallback: function() {
        $('button.rowBtnDelete').on('click', function (e) {
            //e.preventDefault();
            alert("pls");

            // Get data like so
            //$(this).data('vacid');
        });
    }
});
1
Dennis 9 November 2017, 16:06

1 menjawab

Jawaban Terbaik

Jadi masalahnya adalah bahwa modal hapus Anda tidak mendapatkan id dari catatan yang perlu Anda hapus. Saran saya adalah memasukkan bidang ID tersembunyi di modal Anda, dan ketika tombol hapus baris diklik, perbarui bidang tersembunyi dengan id.

<form class="modal-content" action="<?=site_url( $delAction, $link_protocol )?>" method="post" data-class="validation">
    <!-- Add below -->
    <input type="hidden" id="deleteModalVacId" name="vacid" value=""/>

Klik acara (dengan asumsi kekosongan ada pada elemen tombol baris)

$(document).ready(function () {
    $('button.rowBtnDelete').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('vacid');
        $('#deleteModalVacId').val(id);
        $('#deletemodal').modal('show');
    });
});
1
Captain Hypertext 9 November 2017, 17:02