DataTable Field Dependent on Another DataTable Field

DataTable Field Dependent on Another DataTable Field

ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2
edited June 2023 in Editor

I have an Editor instance with 2 DataTable fields. I am wanting one of them to be dependent on the other, but am hitting an error I'm unsure of. Essentially I'm attempting to accomplish this by changing the AJAX URL within the one that needs it's data changed and then triggering a reload function as below:

            initComplete: function () {
                var activeTableGuarantee = this.api();
                activeTableGuarantee.buttons().container().prependTo("#buttonSpaceGuarantees");
                if (userTermed) {
                    activeTableGuarantee.buttons('0').disable();
                }
                $(".refreshBtn").removeClass("btn-secondary").addClass("btn-primary");
                $(".createBtn").removeClass("btn-secondary").addClass("btn-success");
                //Dependency
                guaranteeEditor.dependent("PersonGuarantees.CommissionPeriodStart_ID", function (val, data, callback) {
                    console.log(val);
                    var commissionEndField = guaranteeEditor.field("PersonGuarantees.CommissionPeriodEnd_ID");
                    var commissionEndDT = guaranteeEditor.field("PersonGuarantees.CommissionPeriodEnd_ID").dt();
                    commissionEndDT.ajax.url("/Configuration/GetCommissionPeriods?newerThanID=" + val + "&onlyFuture=true&onlyMonthly=true");
                    console.log(commissionEndDT.ajax.url());
                    commissionEndDT.ajax.reload(function (json) { commissionEndField.update(json.options["PersonGuarantees.CommissionPeriodEnd_ID"])});
                    //guaranteeEditor.field("PersonGuarantees.CommissionPeriodEnd_ID").dt().ajax.url("/Configuration/GetCommissionPeriods?newerThanID=" + val + "&onlyFuture=true&onlyMonthly=true").load();
                });
            }

The commented out portion of the code was my initial simple one line attempt but resulted in the same error.

The error being returned is:

dataTables.editor.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'nTable')
    at dataTables.editor.min.js:6:56522
    at add (jquery-3.6.0.js:8941:5)
    at buildParams (jquery-3.6.0.js:8928:3)
    at buildParams (jquery-3.6.0.js:8922:4)
    at Object.<anonymous> (jquery-3.6.0.js:8909:5)
    at Function.each (jquery-3.6.0.js:385:19)
    at buildParams (jquery-3.6.0.js:8900:10)
    at buildParams (jquery-3.6.0.js:8922:4)
    at buildParams (jquery-3.6.0.js:8922:4)
    at buildParams (jquery-3.6.0.js:8922:4)

The editor is initialized as follows:

        guaranteeEditor = new $.fn.dataTable.Editor({
            ajax: {
                url: "@Url.Action("LoadPersonGuarantees", "Plans")",
                data: { "userName": userName, "upcoming": "true" }
            },
            table: "#personGuarantees",
            fields: [
                {
                        label: "Start Date: ", name: "PersonGuarantees.CommissionPeriodStart_ID", type: "datatable", optionsPair: { value: "ID" },
                        config: {
                            ajax: {
                                url: "@Url.Action("GetCommissionsPeriods", "Configuration")",
                                data: { "onlyFuture": "true", "onlyMonthly": "true" }
                            },
                        columns: [{ title: "Monthly Start Date", data: "MonthlyBonusStart" }]
                        }
                },
                {
                    label: "End Date: ", name: "PersonGuarantees.CommissionPeriodEnd_ID", type: "datatable", optionsPair: { value: "ID" },
                    config: {
                        ajax: {
                            url: "@Url.Action("GetCommissionsPeriods", "Configuration")",
                            data: { "onlyFuture": "true", "onlyMonthly": "true"}
                        },
                        columns: [{ title: "Monthly End Date", data: "MonthlyBonusEnd"}]
                    }
                },
                {
                    label: "Amount: ", name: "PersonGuarantees.Amount"
                }

            ]
        });

I can see in my console logs that it is indeed updating the URL, but when I go to attempt to load that data in (using either the field update or the ajax.url().load() method, I get the error shown.

I haven't used this in the past, so maybe I'm just messing it up, but I'm stumped on it for the time being and couldn't find anything in here that was this specific issue.

This contains sensitive information and is running locally on our internal servers so I can't give a better example but can share additional details if needed.

Thanks for any help.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Difficult to say with minified code and not knowing the version, but the error might suggest that the referenced table doesn't exist?

    Could you build with the non-minified version and show me that stack trace, and also state the version of Editor being used?

    Thanks,
    Allan

  • ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2

    Hey @allan,

    Good point, forgot about the minified code.

    Version is Editor 2.1.3, here is the error with the non-minified:

    dataTables.editor.js:5595 Uncaught TypeError: Cannot read properties of undefined (reading 'nTable')
        at dataTables.editor.js:5595:26
        at add (jquery-3.6.0.js:8941:5)
        at buildParams (jquery-3.6.0.js:8928:3)
        at buildParams (jquery-3.6.0.js:8922:4)
        at Object.<anonymous> (jquery-3.6.0.js:8909:5)
        at Function.each (jquery-3.6.0.js:385:19)
        at buildParams (jquery-3.6.0.js:8900:10)
        at buildParams (jquery-3.6.0.js:8922:4)
        at buildParams (jquery-3.6.0.js:8922:4)
        at buildParams (jquery-3.6.0.js:8922:4)
    

    It does seem to be saying the table doesn't exist, but it only throws that error when finally calling the load or reload functions, it's allowing it to update and reference the AJAX link.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Thank you. What is interesting is that the event handler there shouldn't be getting called if you are just Ajax reloading the table! It is an init event handler.

    As a quick little test you could try changing the line that it is breaking on to be:

                if (settings && settings.nTable !== table[0]) {
    

    That will stop that error. Whether or not the page works properly...

    I think you one liner should work - there should be no need to call the field's update method, so I'd suggest commenting that ajax.reload out. That is likely causing other issues due to two async Ajax requests happening at the same time.

    Much more than that, I think I'd need to stick a debugger on a page that demonstrates the issue to be able to get a full picture of what is going on. I've just tried an Ajax reload locally on a field, but it appears to be working okay. So I'm not 100% sure what is going on I'm afraid and why init is being triggered again. That's the really odd bit.

    Allan

  • ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2
    edited June 2023

    Hey @allan,

    Making that change did stop the error, however it's now moved itself to an error within the datatables.select.js

    dataTables.select.js:60 Uncaught TypeError: Cannot read properties of undefined (reading '_select')
        at DataTable.select.init (dataTables.select.js:60:10)
        at dataTables.editor2.js:5601:32
        at add (jquery-3.6.0.js:8941:5)
        at buildParams (jquery-3.6.0.js:8928:3)
        at buildParams (jquery-3.6.0.js:8922:4)
        at Object.<anonymous> (jquery-3.6.0.js:8909:5)
        at Function.each (jquery-3.6.0.js:385:19)
        at buildParams (jquery-3.6.0.js:8900:10)
        at buildParams (jquery-3.6.0.js:8922:4)
        at buildParams (jquery-3.6.0.js:8922:4)
    

    That section now looks as follows, in the tested update code, the select.init is where it is unhappy:

      var dt = table
                .addClass(datatable.tableClass)
                .width('100%')
                .on('init.dt', function (e, settings) {
                if (settings && settings.nTable !== table[0]) {
                    return;
                }
                var api = new DataTable$3.Api(settings);
                var containerNode = $(api.table(undefined).container());
                // Select init
                DataTable$3.select.init(api);
                // Append side button controls
                side
                    .append(containerNode.find('div.dataTables_filter'))
                    .append(containerNode.find('div.dt-buttons'))
                    .append(containerNode.find('div.dataTables_info'));
            })
    

    It also doesn't function as expected. I moved to just using the one line solution so the dependent call now looks as follows:

            guaranteeEditor.dependent("PersonGuarantees.CommissionPeriodStart_ID", function (val, data, callback) {
                console.log(val);
                var commissionEndField = guaranteeEditor.field("PersonGuarantees.CommissionPeriodEnd_ID");
                var commissionEndDT = guaranteeEditor.field("PersonGuarantees.CommissionPeriodEnd_ID").dt();
                guaranteeEditor.field("PersonGuarantees.CommissionPeriodEnd_ID").dt().ajax.url("/Configuration/GetCommissionPeriods?newerThanID=" + val + "&onlyFuture=true&onlyMonthly=true").load();
            });
    
    

    I'm using the CDN version of DataTables, but if needed can download local to make changes.

    Thanks for the help as always.

  • ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2

    And...I figured it out. I had a typo in my URL for the reload. The errors returned were still a bit strange for that occurence, but nonetheless, once I fixed the typo...the page works as expected.

    False alarm :smile:

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    That is a bit odd! Good to hear you got it working though!

    Allan

Sign In or Register to comment.