Copy Line Locks Editing with Unable To determine field from source

Nwilliams8162

Basically I copy the same line 4 times (chaning the DT_RowID so it is unique) but then when I go to edit a line I get the error:

Unable to automatically determine field "cod" from source. Get this sometimes randomly too. But the className is there and it's there in editor, so I don't know why it is having issues.

//PPA_VPPA TABLE 
var PPA_VPPAeditor = new $.fn.dataTable.Editor( {
    table: currentppavppatableid,
    fields: [ {
            type: 'select', label: 'project', name:  'project', multiple: false, options: projectOptionsList
        }, {
            type:     'select', label:    'Status:', name:     'status', multiple: false, options: proposalStatusOptionsList
        }, {
            label: "Probability:",  name: "probability"
        }, {
            type:     'select', label:    'Contract Type:',  name:     'contracttype',  multiple: false, options: contractTypeOptionsLim
        }, {
            type:     'select',  label:    'Settlement Type:', name:     'settlementtype', multiple: false, options: settlementtypeoptionslist
        }, {
            type:     'select', label:    'Settlement Locations:', name:     'settlementlocation', multiple: false,  options: settlementtypelocationlist
        }, {
            type:     'select',
            label:    'Technology:',
            name:     'technology',
            multiple: false,
            options: technologyppavppastorageLim
        }, {
            type:     'select',
            label:    'Product:',
            name:     'product',
            multiple: false,
            options: productOptionsLim
        }, {
            label: "MW:",
            name: "mw",
            attr: {
                type: "number",
                min: 0
            }
        }, {
            label: "Term Length:",
            name: "termlength"
        }, {
            label: "Escalator:",
            name: "escalator",
            attr: {
                type: "number",
                min: 0
            }
        }, {
            label: "PPA Price ($/MWh):",
            name: "pricemwh",
            attr: {
                type: "number",
                min: 0
            }
        }, {
            label: "At IRR:",
            name: "atirr",
            attr: {
                type: "number",
                min: 0
            }
        }, {
            label: "COD",
            name: "cod",
            type: 'datetime'
        }, {
            type:     'select',
            label:    'Shape:',
            name:     'shape',
            multiple: false,
            options: shapeoptionslist
        }, {
            label: "Pricing Notes:",
            name: "pricingnotes",
            type:  "textarea"
        }, {
            label: "Date Sent:",
            name: "datesent",
            type: "datetime"
        }, {
            label: "Shortlisted:",
            name: "shortlisted",
            type: "checkbox",
            unselectedValue : false,
            options: [
                { label: "", value: true },
            ]
        }, {
            label: "Track:",
            name: "track",
            type: "checkbox",
            unselectedValue : false,
            options: [
                { label: "", value: true },
            ]
        }
    ],
    formOptions: {
        inline: {
            onEsc: 'close'
        }
    }
} );
currentppavppatableid.on('blur', 'td', function () {
    var gettable = jQuery(this).parents('table').DataTable();
    var status = gettable.cell(this).data();
    var getClass = jQuery(this).attr('class');
    var newData = '';
    var options = data.proposalstatuses;
    for (var i = 0; i < options.length; i++) {
        var prob = options[i].prob;
        var value = options[i].value;
        if (status == value) {
            newData = prob;
        }
    } 
    if (getClass.includes("status") == true){
        gettable.cell(jQuery(this).next('td')).data(newData);   
    }
    if (getClass.includes("shortlisted") == true){
        gettable.draw();
    }    
    if (getClass.includes("track") == true){
        gettable.draw();
    }                 
}); 

Nwilliams8162

var ppavppatable = currentppavppatableid.DataTable( {
    data: ppavppatabledata,
    searching: false,
    paging: false,
    columns: [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },
        { data: "project", orderable: true, render: function(data) {
            var select = '';
            for (var i = 0; i < options.length; i ++) {
                if (options[i].value == data) {
                    select = options[i].label
                }
            }
            return select
        }, className: 'project'},
        { data: "status", orderable: true, render: function(data) {
            
            var select = '';
            for (var i = 0; i < statusOptions.length; i ++) {
                if (statusOptions[i].value == data) {
                    select = statusOptions[i].label
                }
            }
            return select
        }, className: 'status'},
        { data: "probability", orderable: true, className: 'probability', render: $.fn.dataTable.render.number( ',', '.', 0,'', '%' )},
        { data: "contracttype", orderable: true, render: function(data) {
            var select = '';
            for (var i = 0; i < contractOptions.length; i ++) {
                if (contractOptions[i].value == data) {
                    select = contractOptions[i].label
                }
            }
            return select
        }, className: 'contracttype'},
        { data: "settlementtype", orderable: true, render: function(data) {
            var select = '';
            for (var i = 0; i < settlementOptions.length; i ++) {
                if (settlementOptions[i].value == data) {
                    select = settlementOptions[i].label
                }
            }
            return select
        }, className: 'settlementtype'},
        { data: "settlementlocation", orderable: true, render: function(data) {
            var select = '';
            for (var i = 0; i < settlementlocationoptions.length; i ++) {
                if (settlementlocationoptions[i].value == data) {
                    select = settlementlocationoptions[i].label
                }
            }
            return select
        }, className: 'settlementlocation'},
        { data: "technology", orderable: true, render: function(data) {
            var select = '';
            for (var i = 0; i < techOptions.length; i ++) {
                if (techOptions[i].value == data) {
                    select = techOptions[i].label
                }
            }
            return select
        }, className: 'technology'},
        { data: "product", orderable: true, render: function(data) {
            var select = '';
            for (var i = 0; i < productOptionsLim.length; i ++) {
                if (productOptionsLim[i].value == data) {
                    select = productOptionsLim[i].label
                }
            }
            return select
        }, className: 'product'},
        { data: "mw", orderable: true, className : 'mw' },
        { data: "termlength", orderable: true, className: 'termlength' },
        { data: "escalator", orderable: true, className: 'escalator', render: function(data) {
            var newdata = data.replace('.0%', '');
            return newdata ? newdata + '%' : ''
        }},
        { data: "pricemwh", orderable: true, className: 'pricemwh', render: $.fn.dataTable.render.number( ',', '.', 2, '&#36;' )},
        { data: "atirr", orderable: true, className: 'atirr', render: function(data) {
            var datanew = '';
            if (data) {
                datanew = data.replace('%', '')
            }
            return datanew ? datanew + '%' : ''
        }},
        { data: "cod", orderable: true, className: 'cod', render: function(data) {
            return data ? moment(data).format('MM/DD/YYYY') : null
        }},
        { data: "shape", orderable: true, render: function(data) {
            var select = '';
            for (var i = 0; i < shapeOptions.length; i ++) {
                if (shapeOptions[i].value == data) {lect = shapeOptions[i].label}
            }
            return select
        }, className: 'shape'},
        { data: "pricingnotes", orderable: true, className: 'pricingnotes', render: function(data, type, row) {
            var html = data.length > 7 ? data.slice(0, 7) + '...' : data;
            return html
        }},
        { data: "datesent", orderable: true, className: 'datesent', render: function(data) {
            return data ? moment(data).format('MM/DD/YYYY') : null
        }},
        { data: "shortlisted", orderable: true, className: 'shortlisted', render: function(data, type, row) {
            return data == 'false' || data == false ? 'No' : 'Yes'
        }},
        { data: "track", orderable: true, className: 'track', render: function(data, type, row) {
            return data == 'false' || data == false ? 'No' : 'Yes'
        }},
        {
            data: null,
            className: "",
            defaultContent: '<button id="note_editor_copy"><i class="far fa-copy"></i></button> <button id="note_editor_remove"><i class="far fa-trash-alt"></i></button>',
            orderable: false
        },
    ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    keys: {
        columns: ':not(:first-child)',
        keys: [ 9 ],
        editOnFocus: true,
        editor: PPA_VPPAeditor
    },
    order: [[ 19, "desc" ]],
    rowCallback: function( row, data, index ) {
        var filterproject = '';
        jQuery('.ppavppaproject').on('change', function () {
            var selectID = jQuery(this).attr('id');
            if (selectID == ppavppatablefilterid) {
                var thevalue = jQuery(this).val();
                var trackvalue = jQuery('.ppavppatrack').val();
                for (var i = 0; i < options.length; i++) {
                    if (options[i].value == data['project']) {
                        filterproject = options[i].label;
                    }
                }
                if (filterproject == thevalue) {
                    jQuery(row).show();
                } else if (thevalue == 'all') {
                    jQuery(row).show();
                } else {
                    jQuery(row).hide();
                }
            }
        });
    }
});

allan

Basically I copy the same line 4 times (chaning the DT_RowID so it is unique)

How are you doing that copy? Are you literly copy / pasting the tr in the browser's inspector? If so, then yes, that won't work because DataTables doesn't "watch" the DOM for transformations. You'd need to add the new rows using rows.add().

If I've misunderstood, could you clarify for me - hopefully with a link to the page showing the issue so I can help to debug it?

Thanks,
Allan

Nwilliams8162

Allan, here is the code I am using to copy. I have a "Copy" button on each line and it looks for the clicked one and utilizes that rows data to make the new row:

currentppavppatableid.find('tbody').on( 'click', '#note_editor_copy', function () {
                        var rowData = ppavppatable.row(jQuery(this).parents('tr')).data();
                        jQuery.post(window.location.href, {'postType': 'copyProposalLine', 'data' : JSON.stringify(rowData)}, null, "json")
                            .then(function (data, status, headers, config) {
                                if (data) {
                                    copyRowCount++;
                                    rowData.DT_RowId = "row_copy" + copyRowCount;
                                    rowData.copiedproposalLineID = jQuery(this).parents('table').data('id');
                                    rowData.proposalLineID = data;
                                    rowData.proposaltypeNewRow = "PPA_VPPA";
                                    rowData.id = rowData.id;
                                    ppavppatable.row.add(rowData).draw();
                                } else {
                                    jQuery('.main-alerts .alert-error').fadeIn().html('Failed to copy proposal line.');
                                    setTimeout(function(){ 
                                        jQuery('.main-alerts .alert-error').fadeOut() 
                                    }, 4000);
                                }
                            });            
                    });

allan

I think I'm going to need a link to a test case showing the issue I'm afraid. It isn't immediately obvious to me why you'd be getting an unknown field error from that.

Thanks,
Allan

Nwilliams8162

Okay, I unfortunately don't have a way to give you access because it is password protected where it lives and I am not able to give you a "seat" to have a login.

allan

Is there some way to reliably reproduce the error, or is it fairly random?

What happens if you remove the editOnFocus: true,? I'm wondering about that because at the moment the field will enter the edit state when clicked on, but it will also trigger your event handler with the jQuery.post.

Allan

Nwilliams8162

It doesn't happen all the time, but they noticed it happen when they copied one line 4 times in sucession. I can try removing that

allan

4 times quickly? What happens if you wait a few (or even 10) seconds between each copy action? I'm wondering if the Ajax requests are overlapping can causing some issues...

Allan

Nwilliams8162

So here is what I figured out. I would copy three times lets say. Then i would edit "Copied Row 3" and adjust the preSubmit function on editor. When I then went to edit a field on "Copied Row 3" the row id was not updating in the preSubmit so it was on row 2 but the preSubmit said row 3. Not sure why that didn't update.

Nwilliams8162

I fixed it by "rebuilding" the data.data object in the preSubmit. But now I am getting the following error:

Uncaught TypeError: Cannot read property 'data' of undefined

allan

Can you show me the latest code please?

Allan

Nwilliams8162

The biggest change was the for (key ... part I did at the beginning of the presubmit

//SUBMIT ONLY ONE CELL
                    var ppavppafieldtoedit = '';
                    var ppavppanoterowtoedit = '';
                    var ppavppaproplineid = '';
                    var ppavppapropid = '';
                    var ppavppaopportunity = '';
                    var ppavppanoterowtoeditvalue = '';
                    PPA_VPPAeditor.on('initEdit', function (e, node, data, items) {
                        ppavppanoterowtoedit = '';
                        ppavppafieldtoedit = jQuery(ppavppatable.cell(items).node()).attr('class').split(' ')[0];
                        ppavppanoterowtoedit = jQuery(ppavppatable.row(items.row).node()).attr('id');
                        ppavppaproplineid = data.proposalLineID;
                        ppavppapropid = data.id;
                        ppavppaopportunity = jQuery(ppavppatable.cell(items).node()).parents('table').data('id');
                        ppavppanoterowtoeditvalue = data;
                    });
                    

                    PPA_VPPAeditor.on('preSubmit', function (e, data, action) {
                        
                        var newtest = data.data;
                        var test = '';
                        for (var key in newtest) {
                            test = data.data[key]
                        }
                        data.data = {[ppavppanoterowtoedit] : test};

                        if (data.data[ppavppanoterowtoedit][ppavppafieldtoedit] == undefined) {
                        } else if (ppavppafieldtoedit == 'escalator' && !data.data[ppavppanoterowtoedit][ppavppafieldtoedit]) {
                            data.data[ppavppanoterowtoedit][ppavppafieldtoedit] = '0'
                        } else if (ppavppafieldtoedit == 'escalator' && data.data[ppavppanoterowtoedit][ppavppafieldtoedit] > 100 || data.data[ppavppanoterowtoedit][ppavppafieldtoedit] < 0) {
                            alert('The value for this field must be between 0-100');
                            data.data[ppavppanoterowtoedit] = {};                
                            data.data[ppavppanoterowtoedit][ppavppafieldtoedit] = ppavppanoterowtoeditvalue.escalator;
                        } else if (ppavppafieldtoedit == 'atirr' && data.data[ppavppanoterowtoedit][ppavppafieldtoedit] > 100 || data.data[ppavppanoterowtoedit][ppavppafieldtoedit] < 0) {
                            alert('The value for this field must be between 0-100');
                            data.data[ppavppanoterowtoedit] = {};                
                            data.data[ppavppanoterowtoedit][ppavppafieldtoedit] = ppavppanoterowtoeditvalue.atirr;
                        } else if (ppavppafieldtoedit == 'probability' && data.data[ppavppanoterowtoedit][ppavppafieldtoedit] > 100 || data.data[ppavppanoterowtoedit][ppavppafieldtoedit] < 0) {
                            alert('The value for this field must be between 0-100');
                            data.data[ppavppanoterowtoedit] = {};                
                            data.data[ppavppanoterowtoedit][ppavppafieldtoedit] = ppavppanoterowtoeditvalue.probability;
                        } else {
                            var thevalue = '';
                            jQuery.each( data.data, function ( key, values ) {
                                thevalue = values[ppavppafieldtoedit]
                            });
                            data.data[ppavppanoterowtoedit] = {};                
                            data.data[ppavppanoterowtoedit][ppavppafieldtoedit] = thevalue;

                            var newData = '';
                            for (var i = 0; i < proposalstatusoptionsprob.length; i++) {
                                var prob = proposalstatusoptionsprob[i].prob;
                                var value = proposalstatusoptionsprob[i].value;
                                if (data.data[ppavppanoterowtoedit][ppavppafieldtoedit] == value) {
                                    newData = prob;
                                }
                            }

                            if (thevalue === 00) {
                                jQuery.post(window.location.href, {'postType': 'updateProposalLineItemFields', 'proplineid' : ppavppaproplineid, 'value' : '', 'field' : ppavppafieldtoedit}, null, "json")
                                .then(function (thedata, status, headers, config) {
                                    if (thedata) {
                                        
                                    } else if (thedata == 'Record has been changed') {
                                        alert('Line field not updated: Please slow down while your change is being processed')
                                    } else {
                                        alert('Line field not updated')
                                    }
                                });
                            } else {
                                if (ppavppafieldtoedit == 'status') {
                                    jQuery.post(window.location.href, {'postType': 'updateProposalLineItemFields', 'proplineid' : ppavppaproplineid, 'value' : thevalue, 'field' : ppavppafieldtoedit}, null, "json")
                                    .then(function (thedata, status, headers, config) {
                                        if (thedata) {
                                            jQuery.post(window.location.href, {'postType': 'updateProposalLineItemFields', 'proplineid' : ppavppaproplineid, 'value' : newData, 'field' : 'probability'}, null, "json")
                                                .then(function (thedata, status, headers, config) {
                                                    if (thedata) {
                                                        
                                                    } else {
                                                        alert('Line field not updated')
                                                    }
                                                });
                                        } else if (thedata == 'Record has been changed') {
                                            alert('Line field not updated: Please slow down while your change is being processed')
                                        } else {
                                            alert('Line field not updated')
                                        }
                                    });
                                } else {
                                    jQuery.post(window.location.href, {'postType': 'updateProposalLineItemFields', 'proplineid' : ppavppaproplineid, 'value' : jQuery.isArray(thevalue) == true ? thevalue[0] : thevalue, 'field' : ppavppafieldtoedit, 'propid' : ppavppapropid, 'oppoid' : ppavppaopportunity}, null, "json")
                                        .then(function (thedata, status, headers, config) {
                                            if (thedata) {
                                                
                                            } else if (thedata == 'Record has been changed') {
                                                alert('Line field not updated: Please slow down while your change is being processed')
                                            } else {
                                                alert('Line field not updated')
                                            }
                                        });
                                }
                            }
                        }});

allan

Thank you.

Uncaught TypeError: Cannot read property 'data' of undefined

Where does the the console show this error happening - i.e. what line of code. Is it in the block above, or somewhere else?

Allan

Nwilliams8162

Yes, i believe right around line 45 of the code block there.

allan

jQuery.each( data.data, function ( key, values ) {

Where data.data is:

data.data = {[ppavppanoterowtoedit] : test};

And ppavppanoterowtoedit is:

jQuery(ppavppatable.row(items.row).node()).attr('id');

The first thing to do is check that ppavppanoterowtoedit is a valid valid. Then inspect what data.data actually. Perhaps you can do: console.log(JSON.stringify(data)) (just before that jQuery.each call) and show me the result of that.

Allan

Nwilliams8162

I added console.log before the each and this is what was returned on the first field I edited:

{"data":{"row_copy4":{"termlength":"1212","escalator":"","shortlisted":[false],"track":[false]}},"action":"edit"}

Then, I tried editing another field and got this:
Uncaught TypeError: Cannot read property 'termlength' of undefined

allan

On this line: thevalue = values[ppavppafieldtoedit]?

What is the value of ppavppafieldtoedit?

Can you give me a link to a page showing the issue please?

Thanks,
Allan