Select event throwing errors and CRUD call not saving

dynasoft · June 2019

I have 2 issues

I am getting errors when trying to select rows in a table w/ the mouse. The programme loads rows in table tblFileFieldTable via CRUDAdvFileField() which is called in JS $(document).ready function. The user then clicks a row and there's an ajax call via method CRUDAdvRepVal() to load another table (tblRepValTable) in a select event for tblFileFieldTable. The data loads fine in the 1st table, then clicking a row in it loads the data fine in the 2nd table but selecting rows causes error 'Cannot read property 'AdvBillingFileRepVal' of undefined' on line 'repValId = data[0].AdvBillingFileRepVal.id;' in the select event for the 2nd table.
After selecting a row in 1st table, the user needs to be able to add a new record to 2nd table but clicking add button and filling in values for the 2 fields fails to save the new data. The CRUD method CRUDAdvRepVal gets called but nothing gets saved. Please note the get call from the server requires 2 arguments (id and coCode) to get the correct records from CRUDAdvRepVal. Not sure if these get in the way when posting the new row to server.

I'd be very grateful for some help.

Here's my code:

js:

function CRUDAdvFileField() {

    editor3 = new $.fn.dataTable.Editor({

        ajax: '/BillingFiles/CRUDAdvFileField/',
        table: '#tblFileFieldTable',
        fields: [ {
                label: 'id',
                name: 'id'
            }, {
                label: 'FieldID',
                name: 'FieldID'
            }, {
                label: 'FieldType',
                name: 'FieldType'
            }, {
                label: 'FieldCode',
                name: 'FieldCode'
            }, {
                label: 'FieldName',
                name: 'FieldName'
            }, {
                label: 'FieldValue',
                name: 'FieldValue'
            }
        ],
        i18n: {
            error: {
                system: '@(lblo.lblError5)'
            }
        }
    });

    var dataTable = $('#tblFileFieldTable').DataTable( {

        order: [[0, 'desc']],
        columnDefs: [
            { 'bVisible': false, 'targets': 0 },
            { 'bVisible': false, 'targets': 1 },
            { 'bVisible': false, 'targets': 3 }
        ],
        dom: 'Bfrtip',
        ajax: {
            url: '/BillingFiles/CRUDAdvFileField/',
            type: 'GET',
            async: true,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
        },
        columns: [
            { data: 'AdvBillingFileCol.id' },
            { data: 'AdvBillingFileCol.FieldID' },
            { data: 'AdvBillingFileCol.FieldType' ,
                render: function ( data, type, row ) {
                    strTp = '';
                    if (data != null)
                    {
                        if (data == '0')
                        {
                            strTp = '@(lblo.lblDefault)';
                        }
                        else
                        {
                            strTp = '@(lblo.lblUserDefined)';
                        }
                    }
                    return strTp;
                }
            },
            { data: 'AdvBillingFileCol.FieldCode' },
            { data: 'AdvBillingFileCol.FieldName' },
            { data: 'AdvBillingFileAddCol.FieldValue' }
        ],
        select: true,
           buttons: [
        ],
        language: {
            zeroRecords: '@(lblo.lblNoDataFound)',
            loadingRecords: '@(lblo.lblLoading)',
            emptyTable: '@(lblo.lblNoDataFound)'
        }
    });

    dataTable.on( 'select', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            var data = dataTable.rows( indexes ).data().toArray();
            colTy = data[0].AdvBillingFileCol.FieldType;
            colId = data[0].AdvBillingFileCol.FieldID;
            colCode = data[0].AdvBillingFileCol.FieldCode;
            colName = data[0].AdvBillingFileCol.FieldName;
            colValue = data[0].AdvBillingFileAddCol.FieldValue;
            CRUDAdvRepVal(colId, colCode);
        }
    } );

}

function CRUDAdvRepVal(id, coCode) {

    var editor4 = new $.fn.dataTable.Editor({

        ajax: '/BillingFiles/CRUDAdvRepVal/' + id.toString() + "/" + coCode,        //*HERE* - not saving new rows to db
        table: '#tblRepValTable',
        fields: [ {
                label: '@(lblo.lblOriginalValue):',
                name: 'FindValue'
            }, {
                label: '@(lblo.lblNewValue):',
                name: 'ReplValue'
            }
        ],
        i18n: {
            error: {
                system: '@(lblo.lblError5)'
            }
        }
    });

    var dataTable = $('#tblRepValTable').DataTable( {

        destroy: true,
        order: [[0, 'desc']],
        columnDefs: [
            { 'bVisible': false, 'targets': 0 },
            { 'bVisible': false, 'targets': 1 },
            { 'bVisible': false, 'targets': 2 },
        ],
        dom: 'Bfrtip',
        ajax: {
            url: '/BillingFiles/CRUDAdvRepVal/' + id.toString() + "/" + coCode,
            type: 'GET',
            async: true,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
        },
        columns: [
            { data: 'AdvBillingFileRepVal.id' },
            { data: 'AdvBillingFileRepVal.FieldID' },
            { data: 'AdvBillingFileCol.FieldCode' },
            { data: 'AdvBillingFileRepVal.FindValue' },
            { data: 'AdvBillingFileRepVal.ReplValue' }
        ],
        select: true,
           buttons: [
            { extend: 'create', editor: editor4 },
            { extend: 'edit', editor: editor4 },
            { extend: 'remove', editor: editor4 }
        ],
        language: {
            zeroRecords: '@(lblo.lblNoDataFound)',
            loadingRecords: '@(lblo.lblLoading)',
            emptyTable: '@(lblo.lblNoDataFound)'
        }
    });           

    dataTable.on( 'select', function ( e, dt, type, indexes ) {     //*HERE* - selecting row not showing the row cells in data var
        if ( type === 'row' ) {
            var data = dataTable.rows( indexes ).data().toArray();
            repValId = data[0].AdvBillingFileRepVal.id;
            repValFlid = data[0].AdvBillingFileRepVal.FieldID;
            repValCode = data[0].AdvBillingFileCol.FieldCode;
            repValFind = data[0].AdvBillingFileRepVal.FindValue;
            repValRepl = data[0].AdvBillingFileRepVal.ReplValue;
            lstRepValIndex = indexes;
        }
    } );            

}

dynasoft · June 2019

server:

public static DtResponse CRUDAdvFileField()
{
    string strTp = string.Empty;
    Editor editor = null;

    try
    {
        HttpRequest formData = System.Web.HttpContext.Current.Request;

        using (Database db = new Database(SetGetDbType2, SetGetDbConnection))
        {
            editor = new Editor(db, "AdvBillingFileCol").Model<BillingFilesAdvFileFieldDBModel>();
            editor.Field(new Field("AdvBillingFileCol.id")
                .Set(false)
            );
            editor.Field(new Field("AdvBillingFileCol.FieldID")
                .SetFormatter(Format.IfEmpty(null))
            );
            editor.Field(new Field("AdvBillingFileCol.FieldType")
                .SetFormatter(Format.IfEmpty(null))
            );
            editor.Field(new Field("AdvBillingFileCol.FieldCode")
                .SetFormatter(Format.IfEmpty(null))

            );
            editor.Field(new Field("AdvBillingFileCol.FieldName")
                //.SetFormatter(Format.IfEmpty(null))
                .SetFormatter((val, host) => CommonUtilities.IsNullOrEmpty(val) == true ? "" : val)
            );
            editor.Field(new Field("AdvBillingFileAddCol.FieldValue")
                .SetFormatter(Format.IfEmpty(null))
            );
            editor.LeftJoin("AdvBillingFileAddCol", "AdvBillingFileCol.FieldID", "=", "AdvBillingFileAddCol.id" );
            editor.TryCatch(false);
            editor.Debug(true);
            editor.Process(formData);
            editor.Data();
        }
    }
    catch (Exception ex)
    {
        MainUtilities.HandleErrorEvent(false, false, DateTime.Now, string.Empty, ex);
    }
    return editor.Data();
}

public static DtResponse CRUDAdvRepVal(long id, string coCode)
{
    string strTp = string.Empty;
    Editor editor = null;

    try
    {
        HttpRequest formData = System.Web.HttpContext.Current.Request;

        using (Database db = new Database(SetGetDbType2, SetGetDbConnection))
        {
            editor = new Editor(db, "AdvBillingFileRepVal").Model<BillingFilesAdvRepValDBModel>();
            editor.Field(new Field("AdvBillingFileRepVal.id")
                .Set(false)
            );
            editor.Field(new Field("AdvBillingFileRepVal.FieldID")
                .SetFormatter(Format.IfEmpty(null))
            );
            editor.Field(new Field("AdvBillingFileCol.FieldCode")
                .SetFormatter(Format.IfEmpty(null))
            );
            editor.Field(new Field("AdvBillingFileRepVal.FindValue")
                //.SetFormatter(Format.IfEmpty(null))
                .SetFormatter((val, host) => CommonUtilities.IsNullOrEmpty(val) == true ? null : val)
            );
            editor.Field(new Field("AdvBillingFileRepVal.ReplValue")
                //.SetFormatter(Format.IfEmpty(null))
                .SetFormatter((val, host) => CommonUtilities.IsNullOrEmpty(val) == true ? null : val)
            );
            editor.LeftJoin("AdvBillingFileCol", "AdvBillingFileRepVal.FieldID", "=", "AdvBillingFileCol.FieldID" );
            editor.Where("AdvBillingFileRepVal.FieldID", null, "!=");
            editor.Where("AdvBillingFileRepVal.FieldID", id);
            editor.Where("AdvBillingFileCol.FieldCode", coCode);
            editor.TryCatch(false);
            editor.Debug(true);
            editor.Process(formData);
            editor.Data();
        }
    }
    catch (Exception ex)
    {
        MainUtilities.HandleErrorEvent(false, false, DateTime.Now, string.Empty, ex);
    }
    return editor.Data();
}

kthorngren · June 2019

'Cannot read property 'AdvBillingFileRepVal' of undefined' on line 'repValId = data[0].AdvBillingFileRepVal.id;'

That would seem to suggest that data[0] doesn't exist. The place to start is to see what data is. Try using a console.log statement, like this:

            var data = dataTable.rows( indexes ).data().toArray();
            console.log(data);
            repValId = data[0].AdvBillingFileRepVal.id;

Kevin

dynasoft · June 2019

Hi
Thanks. Yes the data isn't there when I debug or send to console, yet when I click to trigger the select event, I do so on a real row that holds data. That's weird.

dynasoft · June 2019

Btw, tblRepValTable is the correct name for the table as it gets populated correctly.

dynasoft · June 2019

Not sure if it is related yet but I raed colId = data[0].AdvBillingFileCol.FieldID; has a value of false when a numeric should be expected. Still checking...

dynasoft · June 2019

I think that accounts for some of the issues but I can't see why it sets FieldID to a bool when the declaration in the Model is a long

dynasoft · June 2019

Data in Network tab of browser is fine

kthorngren · June 2019

I tried your basic select event code here and it captures the rows.
http://live.datatables.net/necakibe/1/edit

Without seeing it in action it would be hard to say. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

dynasoft · June 2019

Hi

Thanks. It works selecting from the 1st table but not the other one when the code is virually the same apart from some field names and types. What would make a variable set to be one type in the model change to another once in the js? If I knew where to look for that would be good.

dynasoft · June 2019

Hi

Would remote access via teamviewer be suitable? I can leave the access open at a certain time for you to access. Let me know.

dynasoft · June 2019

I can do this anytime tomorrow Monday. Thank you.

kthorngren · June 2019

I wonder if the select event for the second table is becoming abandoned since you are destroying destroy: true the Datatable. If you run that function multiple times you may be building up many select events. I would try turning of the select event before re-initializing the Datatable. Something like this:

    dataTable.off( 'select' );

    var dataTable = $('#tblRepValTable').DataTable( {
 
        destroy: true,
        .....

Kevin

dynasoft · June 2019

Hi

This has fixed the earlier issue where I had a strange behaviour where the select event would repeatedly trigger itself and data would return nothing. Thanks.

An issue which is still a problem but that I have not documented before here is, clicking on editor's edit button brings up empty fields when selecting a row.

Strangely, the issue of FieldID giving a value of false is still there. However, it goes away if I replace this:

            columns: [
                { data: 'AdvBillingFileCol.id' },
                { data: 'AdvBillingFileCol.FieldID' },
                { data: 'AdvBillingFileCol.FieldType' }

with this in the datatable code:

            columns: [
                { data: 'AdvBillingFileCol.id' },
                { data: 'AdvBillingFileCol.FieldID' },
                    render: function ( data, type, row ) {
                        return data;
                    }
                },
                { data: 'AdvBillingFileCol.FieldType' }

Before the change you suggested doing the above did nothing as I tried it before so it appears it was something to do with the DT component. Why would the code { data: 'AdvBillingFileCol.FieldID' } not work? Anyway thanks.

dynasoft · June 2019

should be:

columns: [
{ data: 'AdvBillingFileCol.id' },
{ data: 'AdvBillingFileCol.FieldID' ,
render: function ( data, type, row ) {
return data;
}
},
{ data: 'AdvBillingFileCol.FieldType' }

dynasoft · June 2019

Sorry but putting that code makes no difference. I thought I'd seen the correct FieldIDs but its still showing false.

dynasoft · June 2019

Tries some more and it seems to be random, I get the FieldIDs but then values change to false 90% of times. I don't understand what's going on. This is frustrating.

dynasoft · June 2019

Tried...

dynasoft · June 2019

I have fixed the 2nd issue reported at top of this thread by simplifying the code for CRUDAdvRepVal and the DT for table tblRepValTable: I removed the leftjoin.

The issue with the select event is still there though. I wonder if the problem might be with the leftjoin in method CRUDAdvRepVal given above ? The fact it comes up ramdomly is strange.

allan · June 2019

We'd really need a test case showing the issue I'm afraid. It doesn't sounds like a particularly easy one to debug! If you can create an example of http://live.datatables.net , JSFiddle, CodePen or similar, I'll look into it.

Allan

dynasoft · June 2019

Just removed all leftjoin's but the problem remains. FieldID gets set to a bool. Not sure how building a "test case" and spending time doing it is better than giving you Tv access to VS.

colin · June 2019

Hi @dynasoft ,

If there's a test case it allows us to use debuggers on it - it saves everyone time in the long run.

Cheers,

Colin

dynasoft · June 2019

I'll see what I can do

dynasoft · June 2019

Hi
I think I fixed it. After the data loads in the tables, I had code that iterates through the tables to remove entries from the source tables to reflect the user's choice of fields. In one of the if statements I had a single equal sign instead of 2 which set the FieldID to a bool. Silly error but that proved hard to identify. Thanks to everyone who helped on this.

Select event throwing errors and CRUD call not saving

Select event throwing errors and CRUD call not saving

Answers

Howdy, Stranger!

Categories

DataTables

Select event throwing errors and CRUD call not saving

Select event throwing errors and CRUD call not saving

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables