Select2 with inline editing and multiple selections sends update even if there are none

kthorngren

I'm new to using Select2 and Datatables for the matter so I may be missing something simple. Everything seems to work good but one strange issue where an AJAX Edit Action is sent anytime I move from one field to another without making changes. It only happens if I have "multiple: true" for one of the columns. It's not a big deal if there is data in the multi select column as I can make the update and return the correct response to the Editor. If I select any field within a row that has a blank multi select column then a blank Edit Action is sent to the server. Since I don't have an update to perform I don't have a successful response to send back. This causes problems with trying to exit that field.

I prefer no update to be sent if there are no changes but can live with it if needed. Is there a config change I can make or a success response I can return?

Here is the init code for the page:

$(document).ready(function() {
    
    editor = new $.fn.dataTable.Editor( {
        ajax:  '/manage_clusters',
        table: '#edit-table',
        fields: [
            { type: 'hidden', label: 'pkid:', name: 'main.pkid' },
            { label: 'Name:', name: 'main.name' },
            { type: 'select', label: 'Contact Center:', name: 'main.fk_contact_centers', placeholder: 'Select a location' },
            { type: 'select2', label: 'Publisher:',  name: 'main.Pub', placeholder: 'Select a Publisher', 
                    opts: {   }
            },
            { type: 'select2', label: 'Subscribers:',  name: 'main.Sub', placeholder: 'Select a Subscriber',
                    opts: { multiple: true }
            },
        ]
    } );


    var table = $('#edit-table').DataTable( {
        ajax: '/manage_clusters',
        columns: [
            { data: 'main.pkid' },
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: 'main.name' },
            { data: 'cc.contact_center_name', editField: 'main.fk_contact_centers' },
            {   
                data: 'cm.Pub',
                render: function ( data, type, row ) {
                    if (data.length == 0) {
                        return null
                    } else {
                        return data[0].label
                    }
                },
                editField: 'main.Pub' 
            },
            {   
                data: 'cm.Sub',
                render: function ( data, type, row ) {
                    var results = [];
                    $.each(data, function(k, group) {
                        results.push( group.label );
                    });
                    return results
                },
                editField: 'main.Sub' 
            },
        ],
        columnDefs: [
            {   "targets": [0], 
                "visible": false,
                "searchable": false 
            }
        ],
        //rowReorder: {
        //    dataSrc: 'linkOrder',
        //    editor:  editor,
        //},
        //select: {
        //    style: 'os',
        //    selector: 'td:not(:last-child)' // no row selection on last column
        //},
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
    } );

Please let me know if more info is needed. Its difficult to allow access to the server.

Thanks,
Kevin

kthorngren

I am also having a problem with removing all the items from the multi select column. I can remove all but one. When I try removing the last I get a blank Edit Action as described above. I tried allowClear but it seems Select2 only supports allowClear with single selection columns. I updated my Editor init:

    editor = new $.fn.dataTable.Editor( {
        ajax:  '/manage_clusters',
        table: '#edit-table',
        fields: [
            { type: 'hidden', label: 'pkid:', name: 'main.pkid' },
            { label: 'Name:', name: 'main.name' },
            { type: 'select', label: 'Contact Center:', name: 'main.fk_contact_centers', placeholder: 'Select a location' },
            { type: 'select2', label: 'Publisher:',  name: 'main.Pub', 
                    opts: { allowClear: true,
                            placeholder: 'Select a Publisher'  }
            },
            { type: 'select2', label: 'Subscribers:',  name: 'main.Sub',
                    opts: { multiple: true,
                            placeholder: 'Select a Subscriber' }
            },
        ]
    } );

The allowClear works great with the Publisher column.

Does anyone know if Select2 require at least one item in the multi select field?

Kevin

allan

This is a limitation with how Editor 1.5 checks for different values. Basically it just does a === and if not equal then it will submit it to the server as a different value. For multi-select options that is a problem since each value read will result in a new array and [] !== [] in Javascript.

That will be resolved in 1.6 which will do a deep comparison rather than just checking the immediate reference. I plan to ship 1.6 later today.

Regards,
Allan

kthorngren

Thanks Allan, 1.6 did resolve the original issue with constant updates!

I still have the problem of not being able to delete all the items in the multi select field. When I try to delete the last one I get a blank Edit Action AJAX request. Is this expected behavior or do I have something misconfigured. Maybe I'm missing a Select2 option.

I can find a workaround if needed.

Kevin

allan

Its possibly expected. If there are no options selected, then I would expect the client-side not to send any options. Editor's PHP and .NET libraries' Mjoin option will always do a delete all and then insert all for exactly that reason.

Are you using either of them, or is it your own backend you are using?

If you have a link to the page so I can take a look I'll be able to confirm the behaviour.

Allan

kthorngren

If needed I may be able to setup something for you to look but right now its on a network that is not accessible from outside. I'm using a Python backend. I'm struggling with having to learn HTML and Javascript for this.... don't need another language to learn :-)

This is a better description of the issue. If the multi select field has eight items and I delete one the client-side sends an edit action with the remaining seven items in the "data" object. Working as expected. If that field has one item and I delete it the client-side sends an edit action without a "data" object.

I can work around this by having the users insert a placeholder type item then delete the desired item.

BTW, Datatables and Editor have made my project much easier!

Kevin

allan

Thanks for the description. Yes, this is expected. If there is no data to submit (i.e. no options selected), then nothing is submitted!

Having said that, what should be happening when there is an array being submitted to the server and the name of the field includes [], it will add a property called {fieldName}-many-count with the number of options selected (including 0). You can see that in action in this example.

What it might be worth doing is running myEditor.field( 'myField' ).val() from the console when the Editor form is open, and the select2 field has nothing selected on the select2 field. If it returns an empty array, that should work. If it returns null that might be the issue with it not sending anything at all.

Allan

kthorngren

Got it!

Added [] to the field and now I get the {fieldName}-many-count.

{'action': u'edit', 'data[85][main][Sub-many-count]': u'0'}

Haven't picked up on the [] before. Thanks for the help and glad it was an easy fix.

Kevin

allan

Phew - we got there in the end! Good to hear it is working for you now!

Allan