DataTable Field Dependent on Another DataTable Field
DataTable Field Dependent on Another DataTable Field
ITAppData@HomeStreet.com
Posts: 54Questions: 13Answers: 2
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
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
Hey @allan,
Good point, forgot about the minified code.
Version is Editor 2.1.3, here is the error with the non-minified:
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.
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
initevent handler.As a quick little test you could try changing the line that it is breaking on to be:
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.reloadout. 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
initis being triggered again. That's the really odd bit.Allan
Hey @allan,
Making that change did stop the error, however it's now moved itself to an error within the datatables.select.js
That section now looks as follows, in the tested update code, the select.init is where it is unhappy:
It also doesn't function as expected. I moved to just using the one line solution so the dependent call now looks as follows:
I'm using the CDN version of DataTables, but if needed can download local to make changes.
Thanks for the help as always.
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
That is a bit odd! Good to hear you got it working though!
Allan