Cannot register button click in modal in datatables

Question

I am using datatables, in one column I have a button which is used for deletion. Clicking this button needs to show a modal, which then shows YES/NO to delete the row.

I managed to get the modal working but I cannot get the javascript to fetch my id's at all. It does not register the click event.

This is the code I have (i omitted the obvious part of the code, eg the table):

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>";

Modal code:

<!-- 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>

Now when I am doing the following in javascript nothing happens (i expect the alert to pop up??):

$(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: the datatable config code looks like this: //DataTables on "my vacancies" page for organisations

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

Where do you define your click event? Is it in the datatables row callback? It could be that the button element doesn't exist on the page when you initialize that event. — Captain Hypertext
– Captain Hypertext, Commented Nov 9, 2017 at 13:27
isnt my javascript at the bottom of my post supposed to be picking this up? — Dennis
– Dennis, Commented Nov 9, 2017 at 13:32
I mean where in your whole page is it defined. I see your click event right there, but is it in a $(document).ready() block in a script tag at the bottom of the page? — Captain Hypertext
– Captain Hypertext, Commented Nov 9, 2017 at 13:34
Yes it is placed in $(document).ready(function () {}); it is in a separate file called after the jQuery is loaded. there are plenty of other things in the same ready function, which do work — Dennis
– Dennis, Commented Nov 9, 2017 at 13:37

Captain Hypertext · Accepted Answer · 2017-11-09 17:02:09Z

1

So the issue is that your delete modal isn't getting the id of the record you need to delete. My suggestion is to include a hidden ID field in your modal, and when a row's delete button is clicked, update the hidden field with the 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=""/>

Click event (assuming the vacid is on the row button element)

$(document).ready(function () {
    $('button.rowBtnDelete').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('vacid');
        $('#deleteModalVacId').val(id);
        $('#deletemodal').modal('show');
    });
});

edited Nov 9, 2017 at 17:02

answered Nov 9, 2017 at 13:44

Captain Hypertext

2,5214 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dennis Over a year ago

I tried adding your code in the var table = $('#table_id').DataTable({}) code, but it does not show the alert at all when i click the button...

Captain Hypertext Over a year ago

Can you update your question with the full datatable initialization?

Captain Hypertext Over a year ago

Ohhhh, you're talking about the DELETE button in the modal, not the datatable button. Is your modal hidden on the page, or is it loaded via ajax?

Dennis Over a year ago

Yes i mean that button, however, shouldn't I be able to draw an alert when clicking on the modal button? If I cannot even show the alert, I don't think I can parse my data-attribute values? So I tried starting there before continuing myself;... the modal is hidden on the page

Captain Hypertext Over a year ago

In that case, I don't see why it wouldn't work. Perhaps load the page, open up your javascript console and see if you can reach the button with $('button.rowBtnDelete').length, which should return 1.

|

Collectives™ on Stack Overflow

Cannot register button click in modal in datatables

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related