Sometimes solution for: Cannot read property "aDataSort" of undefined

At my company, we use DataTables frequently.  (Code available at Datatables.net)

Like my last post, I wanted to put up another post either to help others, or more likely, help myself when I can't solve the answer.

When I'm building out my datatables, I am often converting from an older syntax to the (currently) latest version.   I bang my head on the wall for at least 30 minutes over this error in the Javascript console:

Cannot read property "aDataSort" of undefined

Take this Datatable setup.

In my case, this is my (overly simplified) columnDefs section of my Datatable definition

, 'columnDefs': [
 { 'title':'ID', 'name': 'BatchID', 'data': 'BatchID' }
, { ''title':'Type', 'name': 'Type', 'data': 'Type' }
, { 'title':'Status', 'name': 'Status', 'data': 'Status'

This error is thrown because I'm missing (what should be an obvious addition) below:

var nColNumber = -1;

...
, 'columnDefs': [
  { 'targets': [ ++nColNumber ], 'title':'ID', 'name': 'BatchID', 'data': 'BatchID' }
, { 'targets': [ ++nColNumber ], 'title':'Type', 'name': 'Type', 'data': 'Type' }
, { 'targets': [ ++nColNumber ], 'title':'Status', 'name': 'Status', 'data': 'Status'

When you build your Datatable with a columnDefs configuration option, it's obviously VERY important to tell it the "target" of the definition.   I typically have only an empty <table id="someID"></table> definition in my HTML, then build it completely from Javascript.

I use the ++nColNumber, simply so I can easily move columns around later, and not have to renumber them, and I try to always reference columns by name not position, such as for hiding and showing columns at runtime.

Hope this helps someone solve this issue!

- Will Belden

January 22, 2015

Javascript DataTables and TN4 error on Sorting

This is just a quick note for myself.  Perhaps it will help others.  Mind you, I feel like this is a workaround, not an actual solution.

I have an ajax sourced DataTable.  (If you're not familliar with these, see: http://datatables.net.  They really are awesome.)

This particular table is struggling with handling the refresh of the table based on clicking a sortable (orderable) column header.

The TN4 error is reported against columns that have a "render" function associated with them.  Removing the render() function removes the problem, but I need those functions or they wouldn't be there.

Adding a "defaultContent" value to the column definition, however, seems to alleviate the issue.  I think the problem is somehow related to the sorting feature clearing the data, then the render function says "Um, you asked for row.clientName, but....there's no data, so there's certainly no "clientName" in the (missing) data."

I have other tables that do NOT have this issue, but this seems to be a workaround.

Now I can remember next time.

- Will Belden
January 13, 2015

Very cool Javascript debugging trick (Firefox, Javascript)

I'm working along on a page, an interface for some configuration data.  I have a javascript validation routine that runs upon hitting save.  I had all my various dynamic HTML elements exactly like I wanted them, and didn't want to hard reload the page, yet again, to get the new Javascript code.

In Firefox, I opened Firebug, went to the "Console" tab, and pasted a whole new copy of the function into the console line.  After pasting a multiline piece of code into the small console line, a larger side window popped up to allow better editing, also available from the small icon to the bottom right of that section:

I proceeded to hit my "Save" button to begin my validation and, volia!, my new function worked correctly with the bug fix in place.  And I didn't have to refresh the entire page and start from scratch.  Not a bad little trick!

- Will Belden
Wednesday, June 2, 2010

Better Javascript in Coldfusion

I gave a presentation today at work on improving your Javascript skills, as it relates to Coldfusion development. While there were a million things I would've like to cover, I only had an hour. Here are some highlights that might be worth passing on:

• Avoid <cfinput> and <cfform>
  These tools, while helping to make your Coldfusion development faster, really cripple us as coders. I believe that every HTML developer (those who code in PHP, CF, etc.) needs to know Javascript. The js code generated by Coldfusion is very bulky and not necessarily optimized.
  
  
• Avoid using Coldfusion variables in your Javascript code.
  Think it through and parameterize your JS rather than being lazy and including #variable# directly in the code.
  
  
  
• Move your Javascript to external files
  By placing your js in an outside file, linked to by your Coldfusion code, you allow the browsers to cache something that doesn't change too often. This results in increased bandwidth savings, better logical separation and enforcement of keeping CF out of JS.
  
  In addition, if you have access to a "resource service" that you can tell to include a particular js file (as opposed to using the <script> tag) you'll be able to implement a minify/pack/gzip solution as well as a combining technique at a later date. A service like this can prevent multiple script tags for the same file when the HTML is rendered.
  
  
• Think cross-browser, at all times.
  Sure, maybe today your company says "We only support IE". But I can almost guarantee you that tomorrow it will be "We only support IE and Firefox." In one set of code I saw recently, the js would simply reference "myInput.value". Apparently this works in IE, but doesn't work as well in Firefox. If they had done a proper getElementById() or even
  document.myForm.myInput.value there wouldn't have been issues.
  
  
• Get behind jQuery (or some Javascipt abstraction library)
  By using a tool like jQuery for DOM element selection, like $('#myInput'), you enable abstraction of how you get the object. These tools are also optimized differently for different browsers, allowing you to use a single style of object fetching, without writing a lot of "if IE" statements.
  
  
• If you name an object, also give it an ID.
  
  
• Remember, ID's are meant to be unique amongst all elements on a page.
  
  
• If you need to "group" objects, just add a non-styled class element to the objects. Then you can use something like jQuery to get all the elements with that class.
  
  
• Don't use versioning in your file names.
  If you have myCode.1.2.3.js and you reference that in your code, then you have to refactor all your pages that reference that file when you want to upgrade. Just copy that file to myCode.js, then you swap out the files when a newer version comes along with no code changes.
  
  
• Comment, comment, comment!
  Can't stress this enough. Even if you're the only developer on the project and always will be, commenting is still valuable. I can't tell you how many times I've come back to some code, no matter what language I used, and had no immediate recognition of the code I had written or how it worked. Commenting is so important.
  
  
• Try dynamic event binding
  If you have 10 phone fields with onblur="formatPhone(this);", why not add a class to those fields, like class="phone". Then with something like jQuery, you can create an document.ready event that will bind the formatPhone() custom function to all objects of input#phone that it can find. You could save a whole lot of bandwidth on a site that dishes out such a page frequently.
  
  
• Remember, there's always more optimization to be done
  Most developers are receiving a paycheck from a company that has hired them to produce results. Because of this we have to balance speed with quality. Typically, however, a little forethought can go a long way. Rush, rush, rush is never the answer. Spend 3 hours now to do it right versus 1 hour to "bang it out" and you'll be spending that 1 hour now and 5 later trying to refactor it and correct it. (And that's just you....what about other developers on your team that may get saddled with having to fix your poorly thought out code?)
  

- Will Belden
May 19, 2009
Updated: August 22, 2009