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

Raj2024Raj2024 Posts: 10Questions: 1Answers: 0
edited July 6 in Free community support

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

  • colincolin Posts: 15,226Questions: 1Answers: 2,593
    edited July 6

    I tried defining headers with aria-label attributes 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

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0

    On initialisation I am getting the error.

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0
  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0
    edited July 8

    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.

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    Only three changes (at the time of writing). I am going to merge 2.1 onto master tomorrow 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

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0

    I am getting issue on initialization with nightly file.

  • colincolin Posts: 15,226Questions: 1Answers: 2,593

    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

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0
    edited July 9

    .

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0

    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
    );
  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0

    Thank you. For the support. But we are using VueJS framework inside JS we are constructing table. I am looking how to provide sample.

  • kthorngrenkthorngren Posts: 20,793Questions: 26Answers: 4,860

    See this Vue Blog it uses There are some stackblitz examples you might be able to start from or create your own.

    Kevin

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0

    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?

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

  • Raj2024Raj2024 Posts: 10Questions: 1Answers: 0

    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.

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

Sign In or Register to comment.