Cannot set property 'id' in Datatable

Question

hello iam using datatable i get data from ajax and foreach data then add row to my datatable, but i always got error like this create:805 Uncaught TypeError: Cannot set property 'id' of null in line code "] ).node().id = obj.id;"

for my code

$.ajax({
                    url : "<?php echo url('prod_bill_of_material/get-itemfg') ?>",
                    method : "GET",
                    success : function(data){
                        console.log(data);
                        // var trHTML = '';
                        var no = 1 ;
                        table_modal_itemfg.clear().draw();
                        var field="itemfg";
                        $.each(data, function( index , obj){
                           
                                table_modal_itemfg.row.add( [
                                '<input type="hidden" class="" value="'+ obj.id +'" id="itemfg_id'+obj.id+'">'+no,
                                    '<input type="hidden" readonly id="item_code_'+obj.id+'" value="'+obj.item_code+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_code+'">'+obj.item_code,
                                    '<input type="hidden" readonly id="item_name_'+obj.id+'" value="'+obj.item_name+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_name+'">'+obj.item_name,                            
                                    '<input type="hidden" readonly id="item_measur_'+obj.id+'" value="'+obj.item_measur+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_measur+'">'+obj.item_measur,                            
                                    '<input type="hidden" readonly id="item_weight_'+obj.id+'" value="'+obj.item_weight+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_weight+'">'+obj.item_weight,                            
                                    '<div style="text-align:center;"><button type="button" class="btn btn-info btn-sm" onclick="adddata('+obj.id+',\''+obj.item_name+'\',\''+field+'\')" data-toggle="tooltip" data-placement="top" title="Search"><span class="fa fa-check"> </span></button></div>',
                                ] ).node().id = obj.id;
                            table_modal_itemfg.draw(false);
                            no++;
                        });
                    }
                });

MY MODAL TABLE

<div class="modal fade" id="showitemfg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content" >
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel17">Add Item FG</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">                       
                    <table class="table" id="table_modal_item_Fg">
                        <thead>
                            <tr>
                                <th width="5%">No</th>
                                <th width="15%">Item Code</th>
                                <th width="15%">Item Name</th>
                                <th width="10%">Item Measur</th>
                                <th width="10%">Item Weight</th>
                                <th width="10%">Status</th>
                                <th width="5%">Action</th>
                            </tr>
                        </thead>

                        <tbody id="row-detail-modal">
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning pull-right" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

It looks like you should take a deeper look into how Datatables works: it's designed mainly to avoid you the pain of generating your own HTML each time your data changes. It even has it's own ajax filling option that saves you the trouble of managing your own ajax call.

That being said, you need to draw() your row before you call it's node() method, so that its html is generated before you try and get it. See sample here: https://datatables.net/reference/api/row.add()

var table = $('#example').DataTable();
 
var rowNode = table
    .row.add( [ 'Fiona White', 32, 'Edinburgh' ] )
    .draw()
    .node();
 
$( rowNode )
    .css( 'color', 'red' )
    .animate( { color: 'black' } );

The following code should get you rid of this particular error message:

$.each(data, function( index , obj){
        table_modal_itemfg.row.add( [
        '<input type="hidden" class="" value="'+ obj.id +'" id="itemfg_id'+obj.id+'">'+no,
            '<input type="hidden" readonly id="item_code_'+obj.id+'" value="'+obj.item_code+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_code+'">'+obj.item_code,
            '<input type="hidden" readonly id="item_name_'+obj.id+'" value="'+obj.item_name+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_name+'">'+obj.item_name,                            
            '<input type="hidden" readonly id="item_measur_'+obj.id+'" value="'+obj.item_measur+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_measur+'">'+obj.item_measur,                            
            '<input type="hidden" readonly id="item_weight_'+obj.id+'" value="'+obj.item_weight+'"  class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_weight+'">'+obj.item_weight,                            
            '<div style="text-align:center;"><button type="button" class="btn btn-info btn-sm" onclick="adddata('+obj.id+',\''+obj.item_name+'\',\''+field+'\')" data-toggle="tooltip" data-placement="top" title="Search"><span class="fa fa-check"> </span></button></div>',
        ] ).draw().node().id = obj.id;
    table_modal_itemfg.draw(false);
    no++;
});