CODEWITHSUNDEEP
javascriptdatatablesaurelia
Kevin Vasko
Kevin Vasko

Reputation: 1645

Can't correctly import external JS into Aurelia application (dataTables)

I'm trying to get this example to work within my Aurelia application.

https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

I am mainly interested in the blue + orb.

In my aurelia application I added 

"datatables-responsive": "npm:datatables-responsive@^1.0.7",

to my package.json.

I also added:

  <link rel="stylesheet" href="styles/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="styles/responsive.bootstrap.min.css">

to my index.html.

I added import datatables-responsive; to my VM but I get errors saying it can't find different resources.

    Error: XHR error (404 Not Found) loading http://localhost:9000/dist/datatables.net.js
    Error loading http://localhost:9000/dist/datatables.net.js as "datatables.net" from http://localhost:9000/jspm_packages/npm/[email protected]/js/dataTables.responsive.js
Stack trace:
o@http://localhost:9000/jspm_packages/system.js:4:12694
e/</I/s.onreadystatechange@http://localhost:9000/jspm_packages/system.js:4:13219

I don't understand why it is looking for datatables.net.js when it should already have datatables imported. Any suggestions on resolving this?

Config.js

System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "*": "dist/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },
  map: {
    "aurelia-animator-css": "npm:[email protected]",
    "aurelia-bootstrapper": "npm:[email protected]",
    "aurelia-fetch-client": "npm:[email protected]",
    "aurelia-framework": "npm:[email protected]",
    "aurelia-history-browser": "npm:[email protected]",
    "aurelia-loader-default": "npm:[email protected]",
    "aurelia-logging-console": "npm:[email protected]",
    "aurelia-pal-browser": "npm:[email protected]",
    "aurelia-polyfills": "npm:[email protected]",
    "aurelia-router": "npm:[email protected]",
    "aurelia-templating-binding": "npm:[email protected]",
    "aurelia-templating-resources": "npm:[email protected]",
    "aurelia-templating-router": "npm:[email protected]",
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",
    "bootstrap": "github:twbs/[email protected]",
    "core-js": "npm:[email protected]",
    "datatables": "npm:[email protected]",
    "datatables-responsive": "npm:[email protected]",
    "fetch": "github:github/[email protected]",
    "font-awesome": "npm:[email protected]",
    "text": "github:systemjs/[email protected]",
    "github:jspm/[email protected]": {
      "assert": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "path-browserify": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "process": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "util": "npm:[email protected]"
    },
    "github:twbs/[email protected]": {
      "jquery": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "util": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-event-aggregator": "npm:[email protected]",
      "aurelia-framework": "npm:[email protected]",
      "aurelia-history": "npm:[email protected]",
      "aurelia-history-browser": "npm:[email protected]",
      "aurelia-loader-default": "npm:[email protected]",
      "aurelia-logging-console": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-pal-browser": "npm:[email protected]",
      "aurelia-polyfills": "npm:[email protected]",
      "aurelia-router": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]",
      "aurelia-templating-binding": "npm:[email protected]",
      "aurelia-templating-resources": "npm:[email protected]",
      "aurelia-templating-router": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-logging": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-loader": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-history": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-loader": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-logging": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-path": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-event-aggregator": "npm:[email protected]",
      "aurelia-history": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-route-recognizer": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-loader": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-router": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-loader": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "path": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "datatables": "npm:[email protected]",
      "jquery": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "css": "github:systemjs/[email protected]",
      "jquery": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "css": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "util": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "assert": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "inherits": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    }
  }
});

Upvotes: 1

Views: 3290

Answers (2)

Kevin Vasko
Kevin Vasko

Reputation: 1645

Resolved the issue. It was all in how I was adding the libraries to my project, how I was importing them, and a slight issue with the way JSPM loads the library (at least I think someone with more experience with Javascript can correct me).

The solution is at this link.

https://github.com/aurelia/skeleton-navigation/issues/473

A working example:

Add the following libraries to your project

jspm install datatables.net=npm:datatables.net
jspm install datatables.net-responsive=npm:datatables.net-responsive
jspm install datatables.net-responsive-bs=npm:datatables.net-responsive-bs
jspm install datatables.net-bs=npm:datatables.net-bs

Index.html:

<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" href="jspm_packages/npm/[email protected]/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body aurelia-app="main">
    <div class="splash">
      <div class="message">Aurelia Navigation Skeleton</div>
      <i class="fa fa-spinner fa-spin"></i>
    </div>

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      // ensure jQuery is loaded and set before other imports in you project
      System.import('jquery')
        .then(jquery => {
          window.jQuery = jquery;
          window.$ = jquery;

          // now load and bootstrap aurelia
          return System.import('aurelia-bootstrapper');
        });
    </script>
  </body>
</html>

welcome.html:

<template>
  <section class="au-animate">
    <div class="container" style="margin-top:20px">
      <div>test datatables</div>
      <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%"></table>
    </div>
    </section>
</template>

welcome.js

import * as datatable from 'datatables';
//following only once in you app i think
import * as responsive from 'datatables.net-responsive';
import * as responsiveBs from 'datatables.net-responsive-bs';
import * as netBs from 'datatables.net-bs';

let responsive = responsive.default(); // to change settings?
responsiveBs.default();
netBs.default();

export class Welcome {
  dataSet = [
      ['Ken','Husband','Home'],
      ['Barbie','Wife','Home']
    ];

  attached() {
   // can call: responsive(settings, options);
    $('#example').DataTable({
       select: true,
       data: this.dataSet,
       columns: [
         { title: "Name" },
         { title: "Position" },
         { title: "Office" }
        ]
   });
  }
}

Upvotes: 1

Gilbert Nwaiwu
Gilbert Nwaiwu

Reputation: 728

How about adding it in the export.Js file?

Upvotes: 0

Related Questions