Using responsive libraries within Aurelia gives TypeError: $(...).dataTable
Using responsive libraries within Aurelia gives TypeError: $(...).dataTable
kvasko
Posts: 18Questions: 6Answers: 0
I am having a really difficult time getting the follow demo to work within my Aurelia application.
https://datatables.net/extensions/responsive/examples/styling/bootstrap.html
I am able to get a normal datatable to work by using https://www.npmjs.com/package/datatables via
jspm install datatables:npm:datatables (taken from here https://siderealdailymentioner.com/using-jquery-datatables-with-aurelia/). I then do
import $ from 'jquery';
import dataTables from 'datatables';
in my application and then $('#example1').dataTable(); works.
However, to get the demo I need to add the following dataTables.bootstrap.js, dataTables.responsive.js, responsive.bootstrap.js.
I tried adding
https://www.npmjs.com/package/datatables.net-bs
https://www.npmjs.com/package/datatables.net-responsive
https://www.npmjs.com/package/datatables.net-responsive-bs
import dataTables from 'datatables.net'; //jquery.dataTables.js
import 'datatables.net-bs'; //dataTables.bootstrap.js
import 'datatables.net-responsive'; //dataTables.responsive.js
import 'datatables.net-responsive-bs'; //responsive.bootstrap.js
When I do that it gives TypeError: $(...).DataTable which indicates that the datatables jquery stuff is loading before jquery itself.
I think this comes down to "datatables.net" being the "core" and "datatables" is a plug-in for jQuery. What would I need to do to make the datatables.net libraries "plugins"?
Answers
Let me alter my question slightly.
I found this report and https://github.com/DataTables/DataTables/issues/564
The suggestion to do import * as dataTable from 'datatables.net'; does indeed allow me to resolve the issue with the TypeError: $(...).DataTable. However, I still cannot get the blue orbs to show up from this example. https://datatables.net/extensions/responsive/examples/styling/bootstrap.html. I am copy and pasting the code, with all the dependencies and it still is not functioning properly for some reason.
I do not see any errors, all of the CSS and js files are loading properly in the network tab. Are there any suggestions on what to do on to investigate further?
We'd need a link to a test page showing the issue to be able to offer any help. I'm afraid I don't immediately see the issue from your above description and the page would need to be debugged to understand why it isn't working.
Allan
Thanks allen. I found the issue.
http://stackoverflow.com/questions/37636331/external-library-reference-works-in-webpack-but-not-in-jspm-within-aurelia/37686698#37686698
Hi kvasko,
I'm trying to do something like that, in my case, loading the datatables-select extension, do you know how can I get it working via jspm ?
I have used this command:
jspm install datatables-select=npm:datatables-select
But, can't get the selection working. Can you help me?
What error do you get?
After i install datatables.net-select-bs from JSPM with:
jspm install npm:datatables.net-select-bs
and try to bundle with Aurelia Bundler i get:
Error on fetch for npm:datatables.net-select-bs@1.2.0.js - no such file or directory...
Anyone knows a fix for that?
Looks like it installs okay for me:
Allan
Hi
Mine installs fine to...but when i want to bundle an include "datatables.net-select-bs"...then i receive the error !
Anyway...i fixed it by creating the missing file and include it myself...
Thanks
Was it a file from the npm package that was missing? Which one?
Allan
Hi Allan,
As i wrote:
Error on fetch for npm:datatables.net-select-bs@1.2.0.js - no such file or directory...
So:
datatables.net-select-bs@1.2.0.js
is missing from "jspm_packages/npm" folder
Maybe because its only "css" file...if i look in "datatables.net-bs" it contains both js and css...
Thanks
That isn't a file. There is
datatables.net-select-bs@1.2.0which is a npm module at version 1.2.0. But there is no such thing asdatatables.net-select-bs@1.2.0.jswhich would perhaps explain the error.Allan
Okay...maybe because i use it trough JSPM...still breaks when i try to bundle...
But still i think the modules should follow same structure:
fx.:
- datatables.net@1.10.12 only contains a "JS" folder
- datatables.net-bs@1.10.12 contains a "JS" folder and a "CSS" folder
The select module doesn't follow same structure:
Maybe its just me !
Thanks
That is correct. It doesn't need any specific Javascript for the Bootstrap integration. Only extensions that need Javascript for their styling frameworks will actually load it.
Allan
Okay...i c...still JSPM will look for a js file when it includes the module in bundles...
Anyways...my fix works so all good !
Thanks