Editor

jmore

I have the following configuration for the editor.

    editor = new $.fn.dataTable.Editor( {
        table: "#myTable",
        idSrc:  "deviceId",
        fields: [
            {label: "depotName", name: "depotName" } ,
            {label: "clientName", name: "clientName"},
            {label: "rtuName", name: "rtuName"},
            {label: "deviceName", name: "deviceName"},
            {label: "serialNumber", name: "serialNumber"},
            {label: "assetNumber", name: "assetNumber" },
            {label: "serviceTag", name: "serviceTag"},
            {label: "location", name: "location" },
            {label: "ipAddress", name: "ipAddress"},
            {label: "deviceType", name: "deviceType"},
            {label: "deviceStatusMessage", name: "deviceStatusMessage" },
            {label: "quiesce", name: "quiesce" },
            {label: "utilization", name: "utilization" },
            {label: "coverage", name: "coverage"},
            {label: "monoLifeCount", name: "monoLifeCount" },
            {label: "colorLifeCount", name: "colorLifeCount"},
            {label: "pageCountThisMonth", name: "pageCountThisMonth"},
            {label: "createdDate", name: "createdDate"},
            {label: "lastActiveDate", name: "lastActiveDate" },
            {label: "Device ID", name: "deviceId" }
        ]
        ajax: function ( method, url, d, successCallback, errorCallback ) {
            if ( d.action === 'edit' ) {
                  // Update each edited item with the data submitted
                $.each( d.data, function (id, value) {
                   //console.log(findIndexInData(theTable.data, 'deviceId', id));
                   value.DT_RowId = id;
                   $.extend( todo, value );
                   output.data.push( todo );
                } );
            }
             // Store the latest `todo` object for next reload
                localStorage.setItem( 'todo', JSON.stringify(todo) );
            // Show Editor what has changed
              successCallback( output );
        }

When I edit a row the first time in the editor performs as expected and the data is stored in local storage and in the table for display. When I edit a second row the editor replaces the first entry that I edited and continues to perform this way for any other edits.
If I remove the ajax definition the editor performs as expected replacing the correct row with the edited values. I have tried everything I can think of to make it work to no avail and my editor trial is coming to an end.

Can access working site at

tmtest.dlinkddns.com:10010
Sign In with
user - datatables
password - 1234

Select Printers button
A search criteria screen will appear where you can then select the Get The Device List button.
Table should appear and this is where the problem exists.

Any direction is appreciated
Thanks

allan

Hi,

Thanks for the link. Unfortunately it appears to be offline at the moment.

The only thing I notice as possibly an issue form the above code is that output is not defined anywhere. I would expect that to result in an error on the Javascript console though. Is that not the case?

Thanks,
Allan

jmore

Allan,
Thanks again for the quick response. I failed to prepend https:// to the URL and I have confirmed that the following access works. Sorry for the inconvenience.

https://tmtest.dlinkddns.com:10010
Sign In with
user - datatables
password - 1234

output was/is defined elsewhere. I moved it to a global as I was trying different approaches to get it to work. When I use the browser debugger I can see that both todo and output contain the right data. I tried to follow the example at
https://editor.datatables.net/examples/advanced/localstorage.html
In the end I an hoping to ise websockets for comms.

allan

Could you try adding idSrc: 'deviceId' to the DataTable initialisation please? I'm not sure that will resolve it immediately, but it will rule a few things out.

Allan

jmore

Allan,
I added the idSrc: 'deviceId' to the DataTable initialisation and it did not change the behaviour. If there are any tests I can run to spare your time please let me know. My account profile has my valid email address.

Thanks

jmore

Allan,
I did some more digging and from what I can see the initial row that is the target of the edit gets assigned an id equivalent to the deviceId. <tr role="row" class="odd" id="828027C6-73E1-5621-A631-1D422A2769A8">
When subsequent rows are edited the id on the initial row changes to the last edited row's deviceId.
I have to presume that successCalback uses the DT_RowId : "AB902EFB-254A-5851-BA02-FA71B22F0C67" passed as part of output to find the correct row to update but is failing because not all rows have the id.
Being a very amature programmer this is as far as I can get for now. Hope it helps.
Thanks
John

jmore

Allan,
I added the inline editor and it works.
John

jmore

Allan,
Take back the previous post. It works if ajax is removed.
John

jmore

Allan,
One more late night addition.
I added the DT_RowId to my sql query and therefore it is included in my table object and consequently in the datatables representation. I Removed the idSrc from the editor and table definitions. The result is that it is working both the inline and form.
I have to leave it for now and move on to other editor work before my trial runs out. If you think you would like to spend time looking at the previous configuration I can revert on a different port.
Just let me know.
Thanks

allan

Excellent - thanks for your insights into this. Great to hear you've got a working configuration now and have been able to narrow down for me what was causing the issue. I'll attempt to recreate the issue locally based on that information.

Regards,
Allan