Editor inline() submitting extra fields when using submit: 'changed'

vg10

I have a DataTables set up with JSON data passed in for several columns, and the editor is hooked up with the idSrc set to the PK. I have set formOptions: {inline: {submit: 'changed'}} and also tried calling editor.inline(this, { submit: 'changed' }); but the JSON data my WebAPI receives includes several other columns/fields that were not edited and are not the PK. Technically this works, but it means my WebAPI code is saving data that didn't change because it is being posted to the server. Is there some trick to why those fields are getting posted? In the example below, if I edit description, I get back siteID (PK), description(edited) and rank(why??); if I edit siteNameInSource I get back siteID, siteNameInSource, and rank (you again?? what are you doing here I didn't edit you?). Any help would be greatly appreciated!

TIA
-VG

var editor = new $.fn.dataTable.Editor({
    //ajax: window.baseUri + 'api/PQView/SaveSites',
    ajax: function (method, url, data, successCallback, errorCallback)
    {
        $.ajax({
            url: window.baseUri + "api/DBEdit/SaveSites",
            type: "POST",
            data: data.data,
            async: true
        })
            .done(function (rtnData)
            {
                alert(rtnData);
                successCallback( rtnData );
            })
            .fail(function (e)
            {
                //logError(window.location.href, e.status + " - " + e.statusText + "\n\n" + e.responseText);
                alert(e.status + " - " + e.statusText + "\n\n" + e.responseText);
            })
        ;
    },
    table: "#siteListTable",
    idSrc: 'siteID',
    formOptions:{
        inline:{
            drawType: 'full-hold',
            onFieldError: 'none',
            submit: 'changed' 
        }
    },
    fields: [
        {
            type: "hidden", 
            name: "siteID"
        },
        {
            label: "Site Name:",
            name: "siteName"
        },
        {
            label: "Description:",
            name: "description"
        },
        {
            label: "Site Name in Data Source:",
            name: "siteNameInSource"
        },
        {
            label: "Rank:",
            name: "rank"
        },
    ]
});

editObj.editTable =
    $('#siteListTable').DataTable({
        data: editObj.data,
        "responsive": true,
        "deferRender": true,
        "lengthMenu": [[15, 25, 50, 100, 200, 500, 1000, -1], [15, 25, 50, 100, 200, 500, 1000, "All"]],
        "autoWidth": true,
        "responsive": {
            "details": {
                "type": 'column'
            }
        },
        //setting datatypes for sorting
        "columns": [
            { type: 'string', data: "siteName" },
            { type: 'string', data: "description" },
            { type: 'string', data: "siteNameInSource" },
            { type: 'num', data: "rank" },
        ],
        keys: {
            className: '',
            columns: ':not(:first-child), :not(:last-child)',
            editor: editor
        }
    });

$('#siteListTable').on('click', 'tbody td:not(.child), tbody span.dtr-data', function (e)
{
    // Ignore the Responsive control and checkbox columns
    if ( $(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
        return;
    }
    editor.inline(this, { submit: 'changed' });
});

// Inline editing on tab focus
editObj.editTable.on( 'key-focus', function ( e, datatable, cell ) {
    editor.inline( cell.index(), { submit: 'changed' } );
} );

allan

Hi,

Are you able to give me a link to the page so I can debug it directly please? I don't see anything in your above code that would cause the issue described, so being able to debug it would be really helpful.

Thanks,
Allan

vg10

Hi Allan, I attempted to create a JSFiddle, but I can't get it to run - possibly I'm not including all of the external JS I needed. Nevertheless, here is what I have so far. If you can point to additional CDN locations of JS needed to run, does this help?

https://jsfiddle.net/vg10/v6bqcegh/

Thanks
-VG

kthorngren

I looked at the console and it says jQuery is not defined. Please add jquery.js to see if it helps.

Kevin

allan

I managed to reproduce the issue locally - thanks for the fiddle.

Its a typing issue - the rank is a number in the data object:

"rank": 9

Then what happens is that Editor puts it into an input element on edit and it checks to see if the value is different on submit. It is now different since 9 !== '9' and Editor is using a strict type check.

A work around for the moment is to make your rank numbers strings - e.g. "9" - that would solve it.

This is one place where weak type checking might actually be useful. I'll have a think about it and probably include it in the next update. I'll post back here with whatever way my thought process goes!

Regards,
Allan

vg10

Kevin, thank you for trying to help with the fiddle.

Allan, thank you for solving the mystery! That makes sense and I can certainly fix that. Thank you so much for your prompt reply. As an aside, I have been using your documentation and forum answers extensively since we recently purchased Editor and I can see that you respond quickly to everyone. I really appreciate the effort and professionalism you have invested in this software and the excellent support you provide! Keep up the great work!

allan

Just to confirm - loose type checking will indeed be used at this point in Editor as of 1.6.4 which will drop soon.

Regards,
Allan

geometry

I am running into this exact scenario with the original JSON data for the table containing numbers but the data retrieved from the editor being strings and hence being included in the "changed" data.

I see that 1.6.4 has some type checking but how do I account for this difference? Is there more configuration required?

See the attached screenshot...

allan

Bother! I missed that line of code and changed and tested for one a few lines down.

For the moment, you could change it to be return o1 == o2;. I'll do a 1.6.5 release before the end of the week with this change as this should have been fixed - sorry.

Allan

geometry

Thanks heaps Allan. I thought that might have been the case

Cheers for the prompt answer

geometry

Another case you may want to consider (for 1.6.5) is when the field is null/empty string?

{ description: null } for JSON data for the table from the server but
{ description: "" } from the editor is also included in "changed"

This may be opening pandoras box with cases though.

allan

Yes, this is the problem with loose type checking. I think for the moment I'll wait to see if it causes any major issues - I don't believe it should, other than an extra write, but the trade-off for the loose type checking is probably work it.

Thanks,
Allan

jonfreed

Reading this post helped me solve my issues with fields where type = select.

The editor appears to assume that the first option is the default value that should be used when no value is retrieved from the server. So, what I had to do was make sure that the first entry in the option array is null.

allan

The editor appears to assume that the first option is the default value that should be used when no value is retrieved from the server.

That's correct. That's how the select field works in web-browsers, so Editor isn't so much as doing that itself, but rather just using the default behaviour of the browsers.

The select field type has placeholder and placeholderDisabled options which can be used to inject an initial option in the list if you need to.

Allan