d.trim() is not a function - datetime-moment.js

WebCodex

Link to test case: N/A
Debugger code (debug.datatables.net): N/A
Error messages shown:

 Uncaught TypeError: d.trim is not a function
    at Array.<anonymous> (datetime-moment.js:43)
    at _fnColumnTypes (jquery.dataTables.js:2294)
    at _fnSort (jquery.dataTables.js:5981)
    at _fnReDraw (jquery.dataTables.js:3567)
    at _fnSortListener (jquery.dataTables.js:6211)
    at jquery.dataTables.js:6244

Description of problem: d.trim is not a function error thrown in datetime-moment.js version 1.10.22

kthorngren

Please provide a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You could debug the datetime-moment.js plugin to see what is happening on line 43. Looks like its this code:

            // Strip out surrounding white space
            d = $.trim( d );

Place a breakpoint before that and look at d.

Kevin

WebCodex

I could but I'm using the CDN from dataTables so they might want to take a look at it, I've reverted to 1.10.11 to fix the issue

kthorngren

There is definitely some changes in that part of the code which doesn't seem to affect this example. It could be helpful if you can either provide a test case to show the issue or some debug information to help them fix the problem.

Kevin

WebCodex

The code is behind an admin login, impossible for you to access, sorry, I'll try and work it out, thanks for your help

WebCodex

Thanks for your help @kthorngren found the problem

For those that are having the same issue, make sure you are using the most up to date versions of both files

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.22/sorting/datetime-moment.js"></script>

Amine27

Hello,
I am having this same bug when updated my packages. The issue was introduced by this commit b400e64, which attempts to migrate from $.trim to trim(). In the doc of the first method, you can read :

Note: This API has been deprecated in jQuery 3.5; please use the native String.prototype.trim method instead. Unlike jQuery.trim, String.prototype.trim does not work with types other than strings (null, undefined, Number). Make sure that your code is compatible when migrating.

So, when table has mixed contents (other than string), it will simply fails and causing this error:

datetime-moment.js:45 Uncaught TypeError: d.trim is not a function

It can be fixed by making sure that the input is a string, (modified line 36):

if ( d && typeof d === "string" ) {

Can you check it please?
Thank you.

colin

That's interesting, @Amine27 , that shouldn't be causing a problem, and as Kevin said it's not affecting our examples. Are you able to create a test case that demonstrates the issue, please, so we can investigate?

Colin

llamasaurus

I'm running into this as well. I do have the latest versions of each referenced in the script tags as per user WebCodex above.

I've also added the type checking as suggested by Amine27 within my columns.render() functions that deal with my dates. While I can debug and watch my dates get handled appropriately by moment.js in the table init, the end result was still the d.trim() is not a function.

Putting a breakpoint on that line 43 in datetime-moment all of my tables data was getting passed through there and it was integer data from a column that was tripping the exception.

I added columns.type properties and with some experimentation ended up with types on everything except my dates; and in doing so my dates are now the only table data passing through $.fn.dataTable.moment. My table loads with my formatted dates and finally sorts appropriately.

pirex360

Me too have this problem, how do you fix it ?

kthorngren

As mentioned above make sure you are using the latest versions. If you just changed versions then maybe you need to clear the browser's cache.

The site examples don't exhibit this problem. To help debug the problem we will need to see your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

pirex360

I have the latest versions, this do not solve the problem.

"datatables.net-plugins": "^1.10.22",
"moment": "^2.29.1",

So far i manually edit the datetime-moment.js, like @Amin27 said, it works ! But if another version is updated... when i use npm update, this will break.

kthorngren

The plugin will check each column to see if all the data in the column matches one of the formats defined using $.fn.dataTable.moment(). If the column data is not a string, ie, null or a number, the error will occur. You can see in this example that the failure occurs when checking the Age column which is numeric.
http://live.datatables.net/yomunago/1/edit

The fix is as @Amine27 posted above. You can save the datetime-moment.js file locally or copy it into your JS to make the change. @allan or @colin will need to make the change for the CDN.

Kevin

allan

I've just committed a change required for this. It will be on the CDN with the next release of DataTables.

Regards,
Allan

pirex360

Still not a release... anyone knows when this will be fixed?

colin

Hopefully in the next couple of weeks. The change is available in the nightly builds. You can find them here.

Colin