I am getting Cannot read properties of undefined (reading 'ariaTitle') for 2.0.8
I am getting Cannot read properties of undefined (reading 'ariaTitle') for 2.0.8
Raj2024
Posts: 10Questions: 1Answers: 0
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: "TypeError: Cannot read properties of undefined (reading 'ariaTitle')"
Description of problem: I was using Data table version 10.0.18 below code is working with that excel download was taking time. So want to migrate to 2.0.8. But getting ariaTitle error. Not able to proceed.
Below is my data table code
Vue.component('data-table-payments', {
inheritAttrs : false,
props : [ 'value' ],
data : function() {
return {
dt : ""
}
},
computed : {
rowData : function() {
let dtArr = [];
$.each(this.value, function() {
let dtRow = {
legalName : this.lName,
inspectionNumber : this.inspNumber,
dueDate : this.dueDate,
orgAmount : this.orgAmount,
paidAmount : this.pdAmount,
remainingAmount : this.remAmount,
};
dtArr.push(dtRow);
});
return dtArr;
}
},
watch : {
value : {
handler : function(val, oldVal) {
let dtArr = [];
$.each(val, function() {
let dtRow = {
legalName : this.lName,
inspectionNumber : this.inspNumber,
dueDate : this.dueDate,
orgAmount : this.orgAmount,
paidAmount : this.pdAmount,
remainingAmount : this.remAmount,
};
dtArr.push(dtRow);
});
this.dt.clear().rows.add(dtArr).columns.adjust().draw();
},
deep : true
}
},
template : `
<table class="display table table-striped" style="width:100%" id="pTable">
<thead>
<tr>
<th scope="col" aria-label="Report Number">Report Number</th>
<th scope="col" aria-label="Name">Name</th>
<th scope="col" aria-label="Amount Due">Amount Due($)</th>
<th scope="col" aria-label="Paid Amount">Paid Amount($)</th>
<th scope="col" aria-label="Remaining Amount Due">Remaining Amount Due($)</th>
<th scope="col" aria-label="Due Date">Due Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
`,
mounted : function() {
this.$nextTick(function() {
let vApp = this;
let editor;
this.dt = $(vApp.$el).DataTable({
responsive : true,
data : vApp.rowData,
language : {
"emptyTable" : "No Records found."
},
columns : [
{
//title: 'Report Number',
data : 'inspectionNumber',
responsivePriority : 2
},
{
//title: 'Name',
data : 'lName',
responsivePriority : 3
},
{
//title: 'Amount Due',
data : 'orgAmount',
responsivePriority : 5,
className : 'text-right',
},
{
//title: 'Paid Amount',
data : 'paidAmount',
responsivePriority : 6,
className : 'text-right',
},
{
//title: 'Remaining Amount Due',
data : 'remainingAmount',
responsivePriority : 7,
className : 'text-right',
},
{
//title: 'Penalty Due Date',
data : 'dueDate',
responsivePriority : 1
},
],
dom : "<'col-sm-3'l><'row'<'col-sm-7'B><'col-sm-5'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-4'i><'col-sm-8'p>>",
//"dom": '<"top"lBrt><"bottom"ipB><"clear">',
buttons : [
{
extend : 'print',
orientation : 'landscape',
exportOptions : {
columns : "thead th:not(.noExport)"
}
},
{
extend : 'excel',
exportOptions : {
columns : "thead th:not(.noExport)"
}
},
{
extend : 'pdf',
orientation : 'landscape',
exportOptions : {
columns : "thead th:not(.noExport)"
}
}
],
order : [ [ 0, "desc" ] ]
});
})
},
beforeDestroy : function() {
//this.dt
}
})
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
I tried defining headers with
aria-labelattributes here, and it all works as expected.When do you see the error? On initialisation? When exporting? When responsive kicks in?
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Colin
On initialisation I am getting the error.
I am downloaded sources from these two urls https://datatables.net/download/packages,
https://datatables.net/manual/installation#HTML
Can I know what is the difference for nightly and regular. Below is the code is causing issues for me even though I provided aria-label for columns.
cell.attr('aria-label', orderable
? col.ariaTitle + ctx.api.i18n('oAria.orderable' + ariaType)
: col.ariaTitle
);
on comment of this it is working. but not able to do in minified version. And styles are changing like missing sort order icons how to fix this plz help me.
Only three changes (at the time of writing). I am going to merge 2.1 onto
mastertomorrow though, which will the become the nightly and has a number of other changes, including a couple of larger ones.If you can link to a page showing the issue (as Colin indicated), I'll take a look into it.
Allan
I am getting issue on initialization with nightly file.
Please update my test case in my original reply to demonstrate the error. We're unable to progress this unless we can debug the problem!
Colin
Here is Colin's example with DataTables 2.1-dev, which appears to be working as expected. As requested, please update it, or otherwise link to a test case showing the issue so we can help resolve the problem.
Allan
.
Even with nightly build I got the error. Commented below code. It worked. But some times sort icons are missing on column names. How to retain those.
cell.attr('aria-label', orderable ? col.ariaTitle + ctx.api.i18n('oAria.orderable' + ariaType)- col.ariaTitle
);
We've both provided a link to an example with works without error. We've both asked for a link to an example which shows the error you are seeing.
Please make it possible for us to provide you with some help by linking to a page that shows the issue.
Allan
Thank you. For the support. But we are using VueJS framework inside JS we are constructing table. I am looking how to provide sample.
See this Vue Blog it uses There are some stackblitz examples you might be able to start from or create your own.
Kevin
See also the Vue manual page for DataTables which includes Stackbltiz examples such as this one.
If you are still having problems, fork that example and modify it to recreate the issue so we can offer some help.
Allan
I downloaded datatable source by excluding bootstrap and jquery. Initial loading time not working after two or three times page refresh it is working. By debugging I found that initial loading not finding data with 1.10.18 it is working fine. I am trying to update 2.0.8 do I need to set anything to delay initial loading?
Apologies if I wasn't clear. Let me be so now: to help we need a test case showing the issue.
You don't go to the garage to get a car fixed without the car!
Show me the problem and I'll help.
Allan
I tried to do same thing in JSBin it is working. Below is the link. But some how in my local loading giving error on load.
https://jsbin.com/pifiyob/edit?html,console,output
Thank you for the support. Is there anyway I can find quickly issue.
Thank you for the link, however, I can't debug an error in a test case with isn't showing an error
.
If you can't link to a page showing the issue, you'll need to debug it back checking the error in the console and determining what line the error is happening on, then working back to see why that line would cause an error. That might be quick, it might not.
Allan