all works except get error popups form Datatables after custom ajax call? how to get rid of them?

mkleinosky

My code works - and be tested here - user can check or uncheck the rightmost column - which updates a substring of a column in another table (the rightmost column in joined to the first 3 columns from 'masterlist)

http://mosttraveledpeople.com/My-MasterList.php (feel free to test online it works and shows tn/4's )

So user check or unchecks a column - I do an event watch on that and do custom ajax call to update the other table, then reload the table... but at some point in the process it seeks columns from ajax for datatsource and does not find that so I get a couple error popups ...

How do I stop those errors - which now have no effect on the actual process I am doing which works ? (Please)
(and my code could probably use a better approach but just as-is with no errors would be 100% fine)

The 2 errors are datatables/net/tn/4 - of the row being updated so it's clear the fields populating the query are not found (not really needed since I refresh aa moment later) ...
Line 117 in the code below is where I call an ajax update page which does what I need it to do based on the checkbox
That works find as a black box update ...

     var tabl;
(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        "ajax": "dteditor/dtajax_masterlist_user1.php?myid=<?=$myid?>",
        "table": "#masterlist",
        "fields": [ 
        { label:"visited", name: "myflag", type:"checkbox", options:    [ { label: '', value: 'Y' } ]},
        { label:"id",      name: "id"},
        { label:"Locid",   name: "Locid"}
         ]
    } );

editor
    .on( 'edit', function ( e, type ) {
       //  alert( 'Editor edit' );
         tabl.ajax.url("dteditor/dtajax_masterlist_user1.php?myid=<?=$myid?>").load();
    } );

$('#masterlist').on( 'click', 'tbody td', function () {
        editor.inline( this, {
            buttons: { label: '&gt;', fn: function () { this.submit(); } }
        } );
} );
////////////////////////////////////////
tabl= $('#masterlist').DataTable( {
 //  "dom": "Tfrtip",
 "dom": '<"wrapper"Tf<l><"clear"><i><p>W<t>',
  "ajax": "dteditor/dtajax_masterlist_user1.php?myid=<?=$myid?>",
  "columns": 
[
 { "data":  "Locid" },
 { "data": "regname" },
 { "data": "countryname" },
 { "data": "LocationNew" },
// { "data": "myflag" }
  {data:   "myflag", render: function ( data, type, row ) {
     if ( type === 'display' ) {
        return '<input type="checkbox" class="editor-myflag">';
        }
      return data;
       }
 }  
],
 
   oColumnFilterWidgets: { 
       // instructs the ColumnFilterWidgets plugin to not apply dropdown boxes to these columns
    aiExclude: [ 0]},
 
 initComplete: function () {
   var api = this.api();
       api.$('.filt').click( function () {
       api.search( this.innerHTML ).draw();
   } );
                 
//   $("table td.yn").parent().css('background-color','#fcc');
//   $("table td.yn:contains('Y')").css('background-color','#cfc');   
  
///////////////////////////////////
    // a little container so it mix in with the rest
    var d = $('<div class="column-filter-widget"></div>');
    $('div.column-filter-widgets').first().append(d);
    
    // this clears all activated dropdown filters
    $('<button>Clear filters</button>').appendTo(d)
      .click(function() {
        $('a.filter-term').trigger('click');
      });
 },
        
 "oLanguage": 
 {
 "oPaginate": {
 "sFirst":    " <br>First page .. ", "sPrevious": " -Prev- ", "sNext":     " -Next- ", "sLast":     " ... Last"
              },
  "sInfo": "<br>Got a total of _TOTAL_ entries to show (_START_ to _END_)",
  "sLengthMenu": "<br>Display _MENU_ records",
   "sSearch": "<br>Filter records:"
  },
                "paging": true,
    "aoColumnDefs": [    { "sClass": "yn tdtc fb", "aTargets": [ 4] }    ], 
    "pagingType": "full_numbers",
   "order": [[ 1, "asc" ],[ 2, "asc" ],[ 3, "asc" ]],
     'bAutoWidth': false , 
 "lengthMenu": [[ -1, 300, 100, 25], [ "All", 300,100,25]], 
 
 
        "tableTools": {
            "sRowSelect": "os",
            "aButtons": [
                //{ "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor }
            //  { "sExtends": "editor_remove", "editor": editor }
            ],
       sRowSelector: 'td:not(:last-child)' // no row selection on last column
        },
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-myflag', row).prop( 'checked', data.myflag == 'Y' );
             if ( $('input.editor-myflag', row).is( ':checked' )) { 
               //// alert("is checked");
                      $('td:eq(4)', row).css( "background-color","#cfc")}
               else { $('td:eq(4)', row).css( "background-color","#fcc")}
               ;
        }
    } );
        $('#masterlist').on( 'change', 'input.editor-myflag', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'myflag', $(this).prop( 'checked' ) ? 'Y' : 'N' )
            .submit();
           var xflag=editor.get( 'myflag' ); 
           var xLocid=editor.get( 'Locid' );    
           var xid=editor.get( 'id' );                 
            /////  alert("testajaxupdate1.php?flag="+xflag+"&Locid="+xLocid+"&uid="+xid);
            $.get("testajaxupdate1.php?flag="+xflag+"&Locid="+xLocid+"&uid="+xid);
    } );
} );

}(jQuery));

    </script>

<link rel="stylesheet" href="http://mosttraveledpeople.com/css/style.css" type="text/css"/>
</head><body  style="background-color:#FFFFFF" >
 <div id="ContentTopCenterHeader" class="ContentTopCenterHeader" style="padding-top: 20px"><?=$title?></div>
<div style="background-color: #ffffff; padding: 10px;">
<div class="container"  style="background-color:#FFFFFF">
<h1 class="tdtl">My MasterList</h1>
 <table cellpadding="0" cellspacing="0" border="0" class="display compact" id="masterlist"  style="max-width: 600px; float: left"  style="background-color:#FFFFFF" >
 <thead>
 <tr style="background-color:#FFFFFF">
 <th>id</th>
 <th>Region</th>
 <th>Country</th>
 <th>Location</th>
 <th>Visited</th>
 </tr>
 </thead>
 </table>

allan

I haven't been able to make the error appear on your page. Perhaps you can give me exact instructions on how to make it do so?

However, the error you are seeing is caused by DataTables encountering null or undefined data. So I would suggest you want to fix the problem rather than just dismissing the error.

The tech note you linked to details a number of way to resolve the issue.

Regards,
Allan

mkleinosky

Yes, I had just managed to fix it ...

I moved line 18 to after 117

        tabl.ajax.url("dteditor/dtajax_masterlist_user1.php?myid=<?=$myid?>").load();

and removed
lines 15-19

so it works with no error messages

thanks for looking!