Form Input Multiple select not working when loading data from array

migmira

Hello,

I am facing a very strange error when using datatables inline editor and multiple select.

The problem is that some select fields don't execute the editor.submit() action. It seems that the order of the elements in the array causes the issue, but I don't think this is the real origin.

In the demo you may see that for row 'New Revision Released' the program doesn't enter to ajax section, and for 'New Approval Request' it does. Look for the console.log('AJAX SUBMIT').

Here is a live demo to see the problem: [test page]
(https://preview.c9users.io/migmira/dogiz/index.html?_c9_id=livepreview2&_c9_host=https://ide.c9.io)

My Editor code:

formEdit = new $.fn.dataTable.Editor( {
    table: "#main_datatable",
    idSrc: 'id',               
    fields: [
        {
            type: "hidden",
            name: "id"
        },                
        {
            name: "name",
            attr: {
                required: true,
                name: "name"
            }
        },
        {
            name: "internal_plants",
            type: "select",
            multiple: true,
            options: [
                { label: "Plant_1",    value: 1 },
                { label: "Plant_2",    value: 2 },
                { label: "Plant_3",    value: 3 },
                { label: "Plant_4",    value: 4 },
                { label: "Plant_5",    value: 5 },
                { label: "Plant_6",    value: 6 },
                { label: "Plant_7",    value: 7 },
            ],
        },                       

    ],
    ajax: function(method, url, data, successCallback, errorCallback){
        //THE PROGRAM DOES NOT ENTER HERE WHEN ROW ID = 1 || 2
        console.log('AJAX SUBMIT'); 
        console.log(formEdit.field('internal_plants').val());
        successCallback(data.data);

    }
} );

$('#main_datatable').on( 'click', 'td', function (e) {

    formEdit.inline(    this,
                        { 
                            buttons: {  label: '<i class="icon-floppy-disk"></i>',
                                        className: 'edit-inline-btn text-primary',
                                        fn: function () { console.log('Submit Boton'); this.submit(); }
                                    } 
                        }
        );
} );

The data to populate the table [json]
(https://preview.c9users.io/migmira/dogiz/js/documents/notifications_debug_data.json?_=1540781529710)

{
"data":[
{"id":1,"name":"New Revision Created","internal_plants":[1,2,3],"description":"To document owner - When a new revision has been created"},
{"id":2,"name":"New Revision Released","internal_plants":[2,6],"description":"To document owner, departments involved and creator - When a new revision has been approved and released"},
{"id":3,"name":"New Revision Declined","internal_plants":[6,2,5],"description":"To document owner, and creator - When a new revision has been declined"},
{"id":4,"name":"New Approval Request","internal_plants":[6,2],"description":"To approver - When he or she needs to approve a document"}]
}

I really appreciate your help

allan

Hi,

Thanks for the link to the page and description! You say:

//THE PROGRAM DOES NOT ENTER HERE WHEN ROW ID = 1 || 2

But that doesn't seem to be the case for me. If I click on the "internal Notification" column for "New Revision Released" then on the console I see:

Submit Boton
AJAX SUBMIT
[3]

Are you not seeing that in your browser?

Allan

migmira

Hi Alan

thank you for your quick reply.

I forgot to mention that the issue only occurs when you don't alter the selected options of the select input.

Try just to click on the 'td' element and then click on the 'save' icon. (Internal Notification, New Revision Released). In my computer y only see ('Submit Boton')

I have been able to reproduce the issue in other colleague's computers, let me know it is still doesn't occur to you.

Thank you again

allan

I'm getting a 500 error from the URL above and the moment, but from your description, if you don't alter any values, then I would expect it to not submit to the server. If no values have changed, then nothing needs to be written to the db, so by default Editor will just close the form. The submit option of the form-options object can be used to control that.

Allan

migmira

ok, I got it, it makes a lot of sense!

Submit option definitely solves my concern

thank you very much!