Problem with modifying selections using checkbox type with array data

PIKSTANG

We have a column in DataTables that is backed by an array of strings. So we've defined the column as:

{
"data" : "stuff[, ]",
"editField" : "stuff"
}

Users can select/de-select these options, so in Editor, we've setup the config as:

{
label : "Stuff",
name : "stuff",
type : "checkbox",
options : someDefaultOptionsForStuff
}

However, it seems that we are having trouble removing selections. For example, there're 5 choices A,B,C,D,E. Let's say, C,D,E were selected and now user de-selected D. We are expecting the value to change to C, E but is observing that the data is coming back as C, E, E.

The issue seems to be due to using $.extend to update the values. For example:
var a = ['C', 'D', 'E']; var b = ['C', 'E']; $.extend(true, a, b);

Is there a way to fix this or work around this for the moment?

allan

Hi,

Thanks for your question. Does the data being sent to the server match what you would expect from your selection? I'm not entirely certain where the $.extend you mention is being triggered - if its in Editor, a custom Ajax callback or somewhere else.

I've just tried this example and it does appear to submit to the server as expected.

If you have a link to the page you can give me, I'll be able to have a look and debug it directly.

Thanks,
Allan

PIKSTANG

Hi Allan,

I'm not sure how to share as our application is internal. I tried to copy out a simplified version of the behavior out on JS Bin. It is not quite a working copy as jsbin don't have DataTables/Editor libraries, but the sample is self contained if the relevant JS and CSS are hooked up.

Thanks,
P

PIKSTANG

Also, the $.extend mentioned is from dataTables.editor.js in the _submitTable function.

allan

Thank you! I hadn't realised that you were using Editor without the Ajax submission. I agree and can see how that problem would arise. Let me have a little think about this one and I'll get back to you!

Allan

allan

DataTables has a function that we can use to resolve this (deep copy objects, shallow copy arrays) called _fnExtend (very similar to $.extend in jQuery). Unfortunately, it isn't exposed at the moment, but I've just committed a fix which will be in the nightly version in the next few minutes (it rebuilds 5 minutes after a commit).

Then in Editor, in the _submitTable table function you mentioned there is an $.each call - that should be replaced with:

        $.each( data.data, function ( key, vals ) {
            var toSave;
            var extender = $.fn.dataTableExt.oApi._fnExtend;

            // Get the original row's data, so we can modify it with new values.
            // This allows Editor to not need to submit all fields
            if ( action === 'edit' ) {
                var rowData = originalData[ key ].data;
                toSave = extender( {}, rowData, true );
                toSave = extender( toSave, vals, true );
            }
            else {
                toSave = extender( {}, vals, true );
            }

            ...

That will resolve the issue you are seeing. Let me know if you'd like me to package the pre-release version of Editor together and send the file over to you rather than you making the change directly if you prefer.

Regards,
Allan

PIKSTANG

Thanks Allan. This worked. We actually used two separate editors (one with Ajax, one without) to batch up our saves. Not sure if that's the "right" way or not, heh.

PIKSTANG

Hi Allan, my team would like to request a copy of the fixed DataTables + Editor together as you have suggested if possible. Thanks!

allan

No problem. I've just sent you an e-mail with the information.

Regards,
Allan