Editor not removing cleared items using select2 plugin

kthorngren

Its been awhile since I've messed with the select2 plugin and I'm probably forgetting something. It works good except when removing items from the selected items. Using DT 1.10.18, Editor 1.9.0 and just downloaded the select2 plugin. The problem happens with both inline and with the edit form.

Select2 Editor fields:

        {
            "name": "main.Pub",
            "label": "Publisher:",
            "type": "select2",
            "opts": {
                "allowClear": true,
                "placeholder": "Select a Publisher"
            }
        },
        {
            "name": "main.Sub[]",
            "label": "Subscibers:",
            "type": "select2",
            "opts": {
                "multiple": true,
                "allowClear": true,
                "placeholder": "Select Subscribers"
            }
        },
        {
            "name": "main.MOH[]",
            "label": "Music pn Hold:",
            "type": "select2",
            "opts": {
                "multiple": true,
                "allowClear": true,
                "placeholder": "Select MoH Servers"
            }
        },
        {
            "name": "main.TFTP[]",
            "label": "TFTP:",
            "type": "select2",
            "opts": {
                "multiple": true,
                "allowClear": true,
                "placeholder": "Select TFTP Servers"
            }
        }

Corresponding DT columns:

        {
            "data": "cm.Pub",
            "title": "Publishers",
            "render": function(data, type, row) {if (data.length == 0) {return null} else {return data[0].label}},
            "editField": "main.Pub"
        },
        {
            "data": "cm.Sub",
            "title": "Subscribers",
            "render": "[, ].label",
            "editField": "main.Sub[]"
        },
        {
            "data": "cm.MOH",
            "title": "Music on hold",
            "render": "[, ].label",
            "editField": "main.MOH[]"
        },
        {
            "data": "cm.TFTP",
            "title": "TFTP",
            "render": "[, ].label",
            "editField": "main.TFTP[]"
        }

Removed the single select main.Pub option and the response has a blank main.Pub but the table still displays the removed item:

{
    "data": [{
        "DT_RowId": "102",
        "main": {
            "pkid": 102,
            "name": "kev cluster 1",
            "fk_hosts_list": "",
            "fk_contact_centers": 123,
            "Pub": "",     <<<<<  Blank main.Pub
            "Sub": [],
            "MOH": [1185],
            "TFTP": []
        },
        "contact_centers": {
            "name": "kev cc"
        },
        "cm": {
            "Pub": [],
            "Sub": [],
            "MOH": [{
                "label": "kevmoh1",
                "value": 1185
            }],
            "TFTP": []
        }
    }]
}

Of course reloading the page and all is displayed correctly. The problem exists for both single and multi select fields. I suspect I've run into this before but can't find the resolution

Am I missing a config option or an event that I should be doing something to refresh the row data?

EDIT: I found another one of my web pages that works a expected. I've compared the two and haven't been able to find why the behavior is different. Will keep looking.

Kevin

allan

Interesting, I guess the first thing to do is narrow the issue down to the client or server-side.

When you remove an item and submit the form, what is the data that is submitted to the server? Does it still contain the removed item, or does it contain just the values which are meant to be there now?

Also, is the behaviour different with just one item in the list (and then removing that), compared to having multiple items selected and removing just one of them?

Thanks,
Allan

kthorngren

The submitted form contains just the values that are meant to be there now. The behavior is the same whether there is one item or multiple. I tried Editor 1.8.1 the behavior is the same. The other page that works is essentially the same page just different Javascript for the different tables. I copied the HTML portion including the CSS and JS includes to from the working page to the non-working to make sure all is the same. Still not working.

There aren't many differences between the Javascript for the two tables. At least nothing I would think would cause the problem. Both pages receive response code 200.

It could be that I'm blind to my code and missing something Here is another example. This is the original row data when loading the page:

{
        "DT_RowId": "102",
        "main": {
            "pkid": 102,
            "name": "kev cluster 1",
            "fk_hosts_list": "",
            "fk_contact_centers": 123,
            "Pub": 1184,
            "Sub": [1186, 1187],
            "MOH": [1185],
            "TFTP": []
        },
        "contact_centers": {
            "name": "kev cc"
        },
        "cm": {
            "Pub": [{
                "label": "kevinpub",
                "value": 1184
            }],
            "Sub": [{
                "label": "kevsub1",
                "value": 1186
            }, {
                "label": "kevsub2",
                "value": 1187
            }],
            "MOH": [{
                "label": "kevmoh1",
                "value": 1185
            }],
            "TFTP": []
        }
    },

Removed kevsub2 and this client submits the values for the remaining labels.

action: edit
data[102][main][pkid]: 102
data[102][main][name]: kev cluster 1
data[102][main][fk_contact_centers]: 123
data[102][main][Pub]: 1184
data[102][main][Sub][]: 1186
data[102][main][Sub-many-count]: 1
data[102][main][MOH][]: 1185
data[102][main][MOH-many-count]: 1
data[102][main][TFTP-many-count]: 0

The server responds with just one value for main.Sub and cm.Sub plus the others.

{
    "data": [{
        "DT_RowId": "102",
        "main": {
            "pkid": 102,
            "name": "kev cluster 1",
            "fk_hosts_list": "",
            "fk_contact_centers": 123,
            "Pub": 1184,
            "Sub": [1186],
            "MOH": [1185],
            "TFTP": []
        },
        "contact_centers": {
            "name": "kev cc"
        },
        "cm": {
            "Pub": [{
                "label": "kevinpub",
                "value": 1184
            }],
            "Sub": [{
                "label": "kevsub1",
                "value": 1186
            }],
            "MOH": [{
                "label": "kevmoh1",
                "value": 1185
            }],
            "TFTP": []
        }
    }]
}

I wouldn't be able to provide a link to the page. I could possibly build a test case if you think the problem might be with a Datatables component. But if you think its on my side I'll keep looking. If you have suggestions for a workaround that would be ok too. However using ajax.relaod() in the postEdit event seems to cause a race condition in my environment and doesn't work well.

Kevin

allan

Hi Kevin,

The send to the server and the reply both look good:

data[102][main][Sub][]: 1186
data[102][main][Sub-many-count]: 1

^ Just one item submitted.

            "Sub": [{
                "label": "kevsub1",
                "value": 1186
            }],

^ Just one returned.

But when the table redraws after the edit, are you saying that it is still showing the two data points?

That sounds to me like the original client-side data (from before the edit) might be getting merged with the data returned from the server (a deep merge). However, Editor has a function that should handle that (it makes use of DataTables' _fnExtend which does a deep copy on objects, shallow on arrays).

Are you running with the non-min version of Editor (or can you)? To check if this is the issue, could you find:

                var extender = $.fn.dataTableExt.oApi._fnExtend;
                var toSave = extender( {}, row.data(), true );
                toSave = extender( toSave, data, true );

And then add:

console.log('TO SAVE', JSON.stringify(toSave), JSON.stringify(data), JSON.stringify(row.data()));

please? Then show me the output from the console after that edit.

Thanks,
Allan

kthorngren

But when the table redraws after the edit, are you saying that it is still showing the two data points?

Yes, both are still there.

Here is the output of toSave, data and row.data():

{
    "DT_RowId": "102",
    "main": {
        "pkid": 102,
        "name": "kev cluster 1",
        "fk_hosts_list": "",
        "fk_contact_centers": 123,
        "Pub": 1184,
        "Sub": [1186, 1187],
        "MOH": [1185],
        "TFTP": []
    },
    "contact_centers": {
        "name": "kev cc"
    },
    "cm": {
        "Pub": [{
            "label": "kevinpub",
            "value": 1184
        }],
        "Sub": [{
            "label": "kevsub1",
            "value": 1186
        }, {
            "label": "kevsub2",
            "value": 1187
        }],
        "MOH": [{
            "label": "kevmoh1",
            "value": 1185
        }],
        "TFTP": []
    }
} 

{
    "DT_RowId": "102",
    "main": {
        "pkid": 102,
        "name": "kev cluster 1",
        "fk_hosts_list": "",
        "fk_contact_centers": 123,
        "Pub": 1184,
        "Sub": [1186],
        "MOH": [1185],
        "TFTP": []
    },
    "contact_centers": {
        "name": "kev cc"
    },
    "cm": {
        "Pub": [{
            "label": "kevinpub",
            "value": 1184
        }],
        "Sub": [{
            "label": "kevsub1",
            "value": 1186
        }],
        "MOH": [{
            "label": "kevmoh1",
            "value": 1185
        }],
        "TFTP": []
    }
} 

{
    "DT_RowId": "102",
    "main": {
        "pkid": 102,
        "name": "kev cluster 1",
        "fk_hosts_list": "",
        "fk_contact_centers": 123,
        "Pub": 1184,
        "Sub": [1186, 1187],
        "MOH": [1185],
        "TFTP": []
    },
    "contact_centers": {
        "name": "kev cc"
    },
    "cm": {
        "Pub": [{
            "label": "kevinpub",
            "value": 1184
        }],
        "Sub": [{
            "label": "kevsub1",
            "value": 1186
        }, {
            "label": "kevsub2",
            "value": 1187
        }],
        "MOH": [{
            "label": "kevmoh1",
            "value": 1185
        }],
        "TFTP": []
    }
}

EDIT: I'm in no hurry for a fix, this page doesn't get used much. However if you want me to test something I can.

Kevin