checkbox and boolean type

geardigital

Hi,

Sorry to bother you again, but I'm stumped:

When I use the checkbox type in Editor, I can't get it to work with boolean types. It works with strings and numbers.

If I drop out to a regular data field (instead of a checkbox), boolean types seem to work just fine (but my table has "true" and "false" values instead of pretty checkboxes after I toggle them)

With checkbox type, the booleans get passed as empty strings: ''.

I prefer to use the boolean type because that is what the ajax api I'm using is returning and expecting for input.

I'm pretty much following your example at https://editor.datatables.net/examples/api/checkbox.html except I'm trying to swap out the 1's and 0's for true/false.

myEditor = new $.fn.dataTable.Editor( {
    // the default dataTable.Editor ajax poster doesn't format the data correctly for our api.
    ajax:  function ( method, url, newRowData, successCallback, errorCallback ) {

               if (newRowData.action != 'edit') {
                   errorCallback(newRowData.action + " is not supported");
               };

               var dataPacket = [{
                                  my_row_id:         newRowData.id,
                                  mycheckbox:        newRowData.data.mycheckbox,
                                  some_string:       newRowData.data.some_string,
                                  some_other_string: newRowData.data.some_other_string
                                 }];

               console.log(dataPacket);
               console.log(JSON.stringify(dataPacket));

               var ajaxPost = $.ajax({
                       type:  "POST",
                       url:  ajaxURL,
                       data:  JSON.stringify(dataPacket),
                       contentType:  "application/json; charset=utf-8",
                       dataType:  "json",
                       success:  function () {

                           var resultData = dataPacket[0]
                           resultData.readonly_string_1 = newRowData.data.readonly_string_1
                           resultData.readonly_string_2 = newRowData.data.readonly_string_2
                           resultData.readonly_string_3 = newRowData.data.readonly_string_3

                           var resultRow = { "row":  resultData } ;
                           successCallback(resultRow); },

                       failure:  function(errMsg) { errorCallback(errMsg); }
                      });

           },
    fields: [
        {label: 'CheckThis', name: 'mycheckbox', type: "checkbox", separator: "|", options: [ {label: '', value: true}] },
        {label: 'My Row ID',   name: 'my_row_id', type: "readonly"},

        {label: 'Some String', name: 'some_string'},
        {label: 'Some Other String',  name: 'some_other_string'},

        {label: 'Read Only String 1', name: 'read_only_string_1', type: "readonly"},
        {label: 'Read Only String 2', name: 'read_only_string_2', type: "readonly"},
        {label: 'Read Only String 3', name: 'read_only_string_3', type: "readonly"}
    ],
    idSrc: 'my_row_id',
    table: '#myTable'
} );

I tried putting a function in to convert the 1's and 0's to boolean inside the 'dataPacket' definition, and then back to boolean again in the 'success' definition. That didn't work on my first try, but I suppose I can continue to pursue that angle if it is the only one I have.

It gets a little confusing when the table is expecting, and happily working with true/false, and the editor can only work with 1/0. So I figured I'd check in to see if there is a reason the Editor is translating Boolean values into '', before I spent a lot of time working on translating true/false into 1/0 and then back again.

The table works fine with this rowCallback:

rowCallback: function ( row, data ) {
    $('input.mycheckbox', row).prop('checked', data.mycheckbox == true);
},

geardigital

With a little fussing, I was able to translate back and forth between true/false and 0/1 coming in and out of the ajax calls. This seems to do what I needed.

Specifically I set the output like this:

 var dataPacket = [{
     my_row_id: newRowData.id,
    some_string:    newRowData.data.some_string,
    some_other_string: newRowData.data.some_other_string
 }];

if (newRowData.data.mycheckbox == 1) 
{dataPacket[0].mycheckbox = true;}
else {dataPacket[0].mycheckbox = false;};

Then the success callback looks like this:

var resultData = dataPacket[0]
if (resultData.mycheckbox == true) {resultData.mycheckbox = 1;}
                                           else { resultData.mycheckbox = 0;};

And lastly, in the rowCallBack for the table definition:

rowCallback: function ( row, data ) {
                        if (data.mycheckbox == true) {data.mycheckbox = 1;} else {data.monitor = 0;};
                        $('input.my_checkbox', row).prop('checked', data.mycheckbox == 1);
                    },

So I'm back in business here and will run with that for now at least.