editor set value as boolean for a checkbox sends an array instead of a boolean

dan@19ideas.com

I have a backend server that is expecting a response in the form of a boolean. I've been following this example exactly as what is posted in this demo example:

https://editor.datatables.net/examples/api/checkbox.html

I have the following field on the editor:

      {
        label: "Active",
        name: "active",
        type: "checkbox",
        options: [
          { label: '', value: true }
        ]
      }

Executing the following code:

    _editor
      .edit($(this).closest('tr'), false)
      .set('active', true)
      .submit();

Send the following value to the server:

"[\r\n  1\r\n]"

Setting the field to false:

    _editor
      .edit($(this).closest('tr'), false)
      .set('active', false)
      .submit();

Send the following value to the server:

"[]"

These results aren't what I'd expect when setting a checkbox value with a boolean type. Why can't I just receive a simple "true" or "false" value? As this complicates my code on the backend.

Then I investigated what was going on:

var _editor = new $.fn.dataTable.Editor({
    ajax: {
          url: '/api/Test',
          data: function (d) {
              var id;
              switch (d.action) {
                    case "create":
                         id = 0;
                         break;
                    case "edit":
                    case "remove":
                         id = d.data[Object.keys(d.data)[0]].ID;
                         break;
              }
              console.log(d.data[id].active);   //weird results
              return JSON.stringify(d);
      },
     ....
    }
});

In the console log, I found out that if the value is true, then d.data[id].active is an array with one index, with the value true. And if the value is false, then d.data[id].active is undefined.

Is there a reason why this logic exists like that? It took me forever to find out what was going on and why my server kept blowing up. To remedy this, in the ajax code I did this:

  var retVal = false;
  if (d.data[id].active.length > 0) {
      retVal = d.data[id].active[0]
  } 
  d.data[id].active = retVal;
  return JSON.stringify(d);

kthorngren

This problem sounds familiar, see if its the same as this discussion:
https://datatables.net/forums/discussion/45414

Kevin

dan@19ideas.com

Hi Kevin,

Yes very similar. In fact, that discussion answers the "null" part. I'm still wondering about the value of sending in an array versus simple types though. In the posted example of "Always on checkbox", there doesn't seem to be a need to give complex types, or an array. It gives an array with a single item, with a 1 value, or nothing at all. The decision just seems convoluted as I'd have to create handlers to take care of this mixed result type. Also the fact that I get extra characters "\r\n" mixed into the sent data as well.

Now, if the checkbox is sent as a group option, then I can understand sending an array.. but for the most part, I couldn't see why that would be implemented, as it seems like poor choice design. I'd personally just create a checkbox per column.

For the most part, the answer is resolved based on the workaround I provided. But it would be nice to get some closure on this reasoning.

allan

I'll check into this tomorrow and get back to you. If you are able to give me a link to a page showing the issue that would be really useful. The \r\n is really odd!

Regards,
Allan

allan

I've just tried it locally with the example you linked to, changing it from 1 to true and it worked as expected for me.

Are you able to give me a link to your page so I can debug it directly please?

Thanks,
Allan

dan@19ideas.com

Hi allan, no worries, I programmatically change the content in the ajax data function, and it works, it removes the /r/n before going to the server.

I'm assuming it could be my environment like the OS or the editor I'm using that caused the issue.