Table check box not working after updating the JQuery to 3.5.1 from 2.1.0

Table check box not working after updating the JQuery to 3.5.1 from 2.1.0

arifcarifc Posts: 4Questions: 1Answers: 0
edited September 2020 in Free community support

After updating the JQuery 3.5.1, datatables check box click event not working. However, it is working with JQuery 2.1.0 version. Getting an error - Uncaught TypeError: Cannot read property 'children' of undefined

     $('#example').on('click', '#checkboxid', function () {

        var $tbody = $('table#example tbody');
        var $trs = $tbody.find("tr[role='row']");

        var $tr_list = [];

        for (var i = 0; i < $trs.length; i++) {
            var $tr = $($trs[i]);

            var checkboxRow = $tr.find("input[type='checkbox']");

            var checkboxChildren = checkboxRow.context.children;

            var checkboxChecked = checkboxChildren[8].children[0].checked;

            Error: Uncaught TypeError: Cannot read property 'children' of undefined

            // I am not adding everything
        }
    }

Please someone help me why I am getting this error after updating the JQuery. I am using the latest DataTables files.

Thanks in advance

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    I don't see any Datatables specific code in your code snippet. Its all generic Javascript and jQuery. It may be a Datatable but that is independent of the code you are working with. Sounds like either line 11 or 13 is not providing the expected result. You will need to debug this to see why.

    If you want our help debugging then please provide a link to your page or a test case replicating the issue so we can see what you have.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • arifcarifc Posts: 4Questions: 1Answers: 0

    Hi Kevin

    Thank you for replying. It will be very difficult to add a demo for this because it is a very big and complicated page.

    My issue is when we were using JQuery version 2.1.0, everything worked fine. However, when we updated the JQuery version 3.5.1, it is not working.

    I have checked the developer mode in Chrome browser and found that older version created the below output -

    {"length":0,"prevObject":{"0":{"_DT_RowIndex":4,"_DTTC_iHeight":39,"sizzle-1599744274381":{"parentNode":[1131,48,true]}},
    "context":{"_DT_RowIndex":4,"_DTTC_iHeight":39,"sizzle-1599744274381":{"parentNode":[1131,48,true]}},"length":1},
    "context":{"_DT_RowIndex":4,"_DTTC_iHeight":39,"sizzle-1599744274381":{"parentNode":[1131,48,true]}},"selector":"input[name='checkbox']"}

    but after update, from context part is missing. I found in the Chrome developer mode is below -

    {"0":{},"length":1,"prevObject":{"0":{"_DT_RowIndex":0,"_DTTC_iHeight":39},"length":1}}

    Uncaught TypeError: Cannot read property 'children' of undefined

    Because there is no 'Context' property created in the DataTables, there is no 'children' property available and our code is throwing an error. Hope it make's sense.

    Hopefully you can help.

    Thanks

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    The test case doesn't need to be a clone of your project. It just needs to show the part of the project that is causing the problem. Basically it needs to show how you are creating the checkboxes and how the click event is not working.

    You generated some debug output. What is the debug output of?

    Basically we have no context to help debug the problem. A test case is the best way.

    Kevin

  • arifcarifc Posts: 4Questions: 1Answers: 0
    edited September 2020

    Hi Kevin

    Many thanks. Check box's created using the following way -

    `columnDefs: [
                    {
                        targets: 35,
                        searchable: false,
                        orderable: false
                        , render: function (data, type, full, meta) {
                            if (data !== "disabled") {
                                return '<input type="checkbox" id="checkboxid" name="id" value="">';
                            }
                            if (data === "disabled") {
                                return '<input type="checkbox" id="checkboxid" name="id" disabled value="">';
                            }
                        }
                    },
                    {
                        targets: [36]
                        , visible: false
                        , width: "20%"
                    },
                    {
                        targets: [26, 27, 28, 29]
                        , type: "date-eu"
                    }
                ]
    
                , order: [[0, 'asc']]`
    

    and the Check box click event I already added on the top in my first comment

    Many thanks

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    edited September 2020

    What I'm asking for is a running test case to show the problem.

    However one thing you can do is create an example checkbox outside of Datatables to see if it works with jQuery 2.1.0 versus 3.5.1. Datatables isn't doing anything with the checkbox except rendering the HTML into the table. Doing this will show whether the problem is with jQuery or Datatables.

    Or you can use the browser's debugger to track down the problem.

    Kevin

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    var checkboxChildren = checkboxRow.context.children;

    The below is documented in the jQuery context docs:

    Note: This API has been removed in jQuery 3.0.

    This is not a Datatables issue.

    I'm not sure what you are trying to do in the 'click' event but this example shows how to use Datatables API's to get checked checkboxes:
    http://live.datatables.net/kiwupege/1/edit

    Kevin

  • arifcarifc Posts: 4Questions: 1Answers: 0

    Many thanks, I will give a try

This discussion has been closed.