Datatables not working on Safari

RobotReebot

Hi, I have a problem with my datatables implemention.

I have made this html page with datatables: "REDACTED" and it works well with all browsers except one: Safari. The error which i get is:

undefined is not an object (evaluating 'n m .style')

Which i have no idea how to solve.
Has anyone ever encountered the same problem? And if so, how did you resolve?

colin

Hi @RobotReebot ,

I haven't got access to Safari I'm afraid - I tried it with online emulators and it appeared to work there. Does the error give any indication of the module?

Cheers,

Colin

RobotReebot

Hi @colin and thanks for the interest. Sadly, we have tried with a mac book and our page does not work. It shows 0 results and gives the following error:

Let me know if you have any idea about what this can be,
Best regards,
Matteo

allan

Hi Matteo,

I've just tried loading the page in Safari and I don't get any errors on load. Is there some specific action to make the error occur?

Allan

allan

Actually I think Colin just pointed me in the right direction. In Chrome the table loads data when selecting a book, but in Safari, while it loads the data, it filters everything out (although I don't see any Javascript errors).

You have quite a few afnFiltering plug-ins. I'd suggest trying to disable them initially and see if that allows the data to be shown in Safari. If it does, enable them one at a time to see which one is filtering out the data.

Allan

RobotReebot

hi @allan and thanks for the reply. You were right, there is a problem with one of my filtrering function.

The problem is white the function which has this comment "//funzione che filtra per data"

This screens will show you the problem, but i have no idea on how to fix them:

This is a chrome screen, and as you can see we have an hidden column "datainMilliseconds" in which the date is converted in milliseconds.

The console log which i have been trying is console.log(millisecondsMin + " " + millisecondsMax + " " +aData[2]);

and as you can see on chrome the value inside aData[2] is correct, it calculates all milliseconds in the right way.

On safari, the problem is that aData[2] seems to be NaN:

and this also happens when i try to set up date type on milliseconds min and max. I suspect the problem lies in the conversion to milliseconds, which is the same for both, but i looked on internet and seem like moment.js should work on safari.

Let me know if you have any other clue and again thanks for the awesome help.
Best regards,
Matteo

RobotReebot

Nevermind, i found the issue.

The problem is that the type date is not supported on safari, for this reason you can't use it on datatables

Thanks for the help, this is part of a site for a big project. If it will go well, i'll promise i'll make a great donation.

Thanks again for all your work and support

Best Regards,
Matteo

P.S i would like to leave the discussion to help other people, but would you mind removing the link to the table?

colin

Hi @RobotReebot ,

Glad all working - website REDACTED, and "great" donations always welcome, ty

Cheers,

Colin

clispedreira

Hi,
I got this same error in Safari (12.0 (13606.2.11)) and Chrome (69.0.3497.100). Even using example dataset, the error occurs when I try to set columns name. Without columns name definition table is (almost) correctly build.

table = $("#dt1_1").DataTable( {
data : [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
],
"columns": [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "bt." },
{ title: "sal." }
],
]});

Safari error:
jquery.dataTables.min.js
TypeError: undefined is not an object (evaluating 'n[m].style').
line 62 column 200

Chrome error:
jquery.dataTables.min.js
Uncaught TypeError: Cannot read property 'style' of undefined.
line 62 column 201

kthorngren

Your posted code seems to work fine in this test case:
http://live.datatables.net/yakobiko/1/edit

Looks like you might not have posted your full Datatables initialization. Please update the test case to replicate your issue. Maybe one of your other init options is referencing a column that is not in the table.

Kevin

clispedreira

Sorry. Here is full initialization:

table = $("#dt1_1").DataTable();
table.clear();
table = $("#dt1_1").DataTable( {
data : [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
],
"columns": [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "bt." },
{ title: "sal." }
],

fixedHeader: False,
paging: False,
pagingType: "numbers",
lengthMenu: [[ 25, 50, -1],[ 25, 50, "All" ]],
order: [[ 1, "asc" ]],
ordering: True,
info:     True,
scrollY: "60vh", 
scrollCollapse: True,
destroy: True
} );

table.columns.adjust().draw();

kthorngren

I updated the test case with your code.
http://live.datatables.net/yakobiko/2/edit

The first error is

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

This is due to the first line. Since there is no heading in my table I get this error. Is that the case in your environment?

I commented the first two lines then get this error:

VM141:51 Uncaught ReferenceError: False is not defined

You have True and False for you options. You need true and false. After fixing this the table works. If this doesn't help then please update the test case to replicate your issues. Its easier to troubleshoot running code than to try scanning code posted in the thread.

Kevin

clispedreira

Hi! Problem was related to malformed DOM. The <thead> number of columns was smaller than <tbody> columns.

    <table>
    <thead>
        <tr>
            <th>C1</th>
            <th>C2</th>
            <th>C3</th>
            <th>C4</th>
            <th>C5</th>
                              <----- it was missing a <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
    </tbody>
    </table>

If number of head columns is smaller than data columns error is:
** TypeError: undefined is not an object (evaluating 'n[m].style').**

If HTML DOM is correct, but number of columns in parameters is smaller than table columns, error is:
** TypeError: undefined is not an object (evaluating 'c.mData').**

example: 6 data columns and just 5 columns titles:

columns : [
        {title: "1"},
        {title: "2"},
        {title: "3"},
        {title: "4"},
        {title: "5"}
        ]