search

wet-boew / wet-boew

Web Experience Toolkit (WET): Open source code library for building innovative websites that are accessible, usable, interoperable, mobile-friendly and multilingual. This collaborative open source project is led by the Government of Canada.
https://wet-boew.github.io/wet-boew/index-en.html
Other
1.6k stars 660 forks source link

Errors in Modernizr complete function, loading ajax DataTables content in IE Edge #7620

Open wxoreid opened 8 years ago

wxoreid commented 8 years ago

We are loading content through ajax calls, this content includes date tables content (i.e.<table class="wb-tables table">...</table>).

In most browsers (FF, Chrome notable), when this data is inserted into the DOM, the Datatables plugin is loaded automatically by WET (as usual), and the tables load and operate normally.

However in IE Edge (and it's compatibility modes), WET will attempt to load the plugin's javascript, but sometimes fail in the Modernizer complete call. Sometimes the plugin will load correctly without error, otherwise this error is seen:

function(){var d=a("#"+j),e=a.fn.dataTableExt;a.extend(e.type.order,{"html-pre":function(a){return c.normalizeDiacritics(a?a.replace?a.replace(/<.*?>/g,"").toLowerCase():a+"":"")},"string-case-pre":function(a){return c.normalizeDiacritics(a)},"string-pre":function(a){return c.normalizeDiacritics(a)},"formatted-num-asc":function(a,b){return c.formattedNumCompare(a,b)},"formatted-num-desc":function(a,b){return c.formattedNumCompare(b,a)}})

Unable to get property 'type' of undefined or null reference

This seems to match up with this line of code:

Line 89: https://github.com/wet-boew/wet-boew/blob/7b4db93bc7030e589d6eac9248fd6265e0f38642/src/plugins/tables/tables.js

The variable $.fn.dataTableExt is not defined (despite being in the complete function, so it should only execute after the library has loaded). The code attempts to access e.type above, which fails. In this case, there is no DataTable functionality.

This error does not happen all the time. The chances of the error seem to go up when the ajax call returns more data (i.e. takes longer to return).

I've testing using WET versions 4.0.18 and 4.0.21, they both have the same issue.

Is there another method we can use to force the datatables plugin to load when loading content through ajax like this?

wxoreid commented 8 years ago

This matches the problem: http://stackoverflow.com/questions/19781753/modernizr-load-callback-executing-before-loaded-script/20039567#20039567

Code inside the complete callback is executing before the javascript library is actually loaded, this causes an error to occur inside wet-boew.js.

wxoreid commented 8 years ago

We have figured out a way to work around this problem.

We are using ajax calls that return and insert content into the DOM which contains WET plugin classes (wb-tables). WET/Modernizr/YepNopeJS code can load the plugin JS from the AJAX call successfully on occasion. Sometimes however, the plugin loading happens concurrently with other plugins loaded from the main JS thread (typically magnific popup, tabbed interface, other data tables). This hits a bug condition that is detailed in the s/o link above, this causes the main WET JS from executing, which prevented the DataTable from being applied.

The workaround involves sourcing the WET datatables JS directly in the HTML, and then initiating the DataTable through their API (i.e. $('.mytable').DataTable()).

hsrudnicki commented 8 years ago

Can be this closed as resolved based on the above? Thank you