Jquery and Datatables call function on checkbox click is not working

Question

I have the following Datatable script working. I need a other script function to activate when a checkbox is clicked. This is not working, does anyone know what i am doing wrong? I checked the console and no post is send and no error logs.

Datatables script

<script type="text/javascript">
    var checkCol = 4; //checkbox column
    $(document).ready(function () {
        $('#accountTable').dataTable({
            rowId: 'id',
            "processing": true,
            select: true,
            "ajax": "selectdatatable_allacc.php",
            "columns": [
                {
                    data: 'name'
                },
                {
                    data: 'email'
                },
                {
                    data: 'password'
                },
                {
                    data: 'rang'
                },
                {
                    data: 'do_lead'
                },
                {
                    data: 'notes',
                    render: function (data, type, row, meta) {
                        return '<font color=' + row.cat_color + '>' + data + '</font>';
                    }
                },
                {
                    'data': null,
                    title: 'Dead',
                    wrap: true,
                    "render": function (item) {
                        return '<input type="submit" value="Dead" style="width:57px !important;" class="example_e" onClick="mobreset(' +
                            item.id + ') "/>'
                    }
                },
                {
                    'data': null,
                    title: 'Login',
                    wrap: true,
                    "render": function (item) {
                        return '<input type="submit" value="Login" style="width:57px !important;" class="example_e" onClick="mobLogin(' +
                            item.id + ') "/>'
                    }
                },
                {
                    'data': null,
                    title: 'Action 2',
                    wrap: true,
                    "render": function (item) {
                        return '<input type="button" value=" Edit " id= ' + item.id +
                            ' style="width:57px !important;" class="example_c edit_data" />'
                    }
                },
            ],
            columnDefs: [{
                    targets: [checkCol],
                    render: function (data, type, row) {
                        if (type ===
                            'display') { //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
                            return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') +
                                ' value="' + row.id + '" class="active" />';
                        }
                        return data;
                    },
                    className: "dt-body-center"
                },
                {
                    targets: 0,
                    className: "dt-body-center"
                },

            ],
            select: {
                style: 'os',
                selector: 'td:not(:nth-child(2))'
            },
        });
    });
</script>

Script to call when checkbox is checked or unchecked

<script type="text/javascript">
    $(document).ready(function () {
        $("input.active").click(function () {
            // store the values from the form checkbox, then send via ajax below
            var check_active = $(this).is(':checked') ? 1 : 0;
            var check_id = $(this).attr('value');

            $.ajax({
                type: "POST",
                url: "dolead.php",
                data: {
                    id: check_id,
                    active: check_active
                },

            });
            return true;
        });

    });
</script>

You can click edit, then [<>! snippet editor, add frameworks and datatabel script and create a minimal reproducible example - the ajax will not work but the code that does the ajax will be visible and a console log will show if it is called — mplungjan
– mplungjan, Commented Feb 3, 2021 at 12:51
I think because that checkboxes are created dynamically by your plugin so try changing your selector like this : $(document).on("click","input.active" ,function() { //your codes.. see if that works. — Swati
– Swati, Commented Feb 3, 2021 at 13:06

Hello World · Accepted Answer · 2021-02-03 13:08:27Z

1

you can try jquery on function to do the work

<script type="text/javascript">
    $(document).ready(function () {
        $("#accountTable").on("click", "input.active", function () { // notice the on function
            // store the values from the form checkbox, then send via ajax below

            console.log("checkbox clicked"); // to check if the event is working

            var check_active = $(this).is(':checked') ? 1 : 0;
            var check_id = $(this).attr('value');

            $.ajax({
                type: "POST",
                url: "dolead.php",
                data: {
                    id: check_id,
                    active: check_active
                },

            });
            return true;
        });

    });
</script>

answered Feb 3, 2021 at 13:08

Hello World

2,9277 gold badges33 silver badges68 bronze badges

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

1 Comment

newusertomysqli12 Over a year ago

Perfect ! Thank you

Collectives™ on Stack Overflow

Jquery and Datatables call function on checkbox click is not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related