Last active
November 23, 2016 02:14
-
-
Save douglascayers/bbb2dda43a959562b03438352722773d to your computer and use it in GitHub Desktop.
Lightning Component that reproduces "Failed to construct 'Option'" error with jQuery 2.2.4 or 3.1.1 and DataTables 1.10.12
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:application extends="force:slds"> | |
<ltng:require scripts="{!join(',', | |
$Resource.jquery_3_1_1_js, | |
$Resource.DataTables + '/DataTables-1.10.12/js/jquery.dataTables.min.js')}" | |
styles="{!$Resource.DataTables + '/DataTables-1.10.12/css/jquery.dataTables.min.css'}" | |
afterScriptsLoaded="{!c.afterScriptsLoaded}"/> | |
<table id="myDataTable"></table> | |
</aura:application> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
afterScriptsLoaded : function(component, event, helper) { | |
var records = [ | |
{ 'Name' : 'Albert', 'Age' : 20 }, | |
{ 'Name' : 'Betty', 'Age' : 30 }, | |
{ 'Name' : 'Carl', 'Age' : 40 }, | |
]; | |
jQuery('#myDataTable').DataTable({ | |
data : records, | |
columns : [ | |
{ data: 'Name', title: 'Name' }, | |
{ data: 'Age', title: 'Age' } | |
] | |
}); | |
} | |
}) |
The problem seems isolated to the l
length dom option which builds a select input with tags. Removing l
from the dom property allows the table to render.
For example: jQuery('#myDataTable').DataTable({ dom: 'tifpr', ... });
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
DataTables can be downloaded from https://datatables.net/download/
jQuery can be downloaded from https://code.jquery.com/
http://salesforce.stackexchange.com/questions/126375/locker-service-creating-problem-in-jquery-datatable