I report here what I have reported here too: https://github.com/leongersen/noUiSlider/issues/971.
I've installed noUiSlider with ES6 imports (no webpack) as suggested in the official repo https://github.com/leongersen/noUiSlider#webpack.
So this is what I have.
// main.js
import 'nouislider';
//index.html
<html>
<body>
<div id="slider"></div>
<script src="js/bundle.js"></script>
<script>
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
</script>
</body>
</html>
But it doesn't work and in the console I have the following message
Uncaught ReferenceError: noUiSlider is not defined.
If I insert <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js"></script> instead of <script src="js/bundle.js"></script> it works.
Can someone help me? Thanks.
in main.js just write that import:
import * as noUiSlider from 'nouislider/distribute/nouislider.js';
The import 'nouislider' in main.js imports the variable noUiSlider into that file.
By default, it does not export it into your window object. When you include the script from the CDN it does export into window, which is why it works there.
You could either:
Move your slider initialization code into main.js
Add window.noUiSlider = noUiSlider in main.js
Related
I have html file which has 3 script tags. I want to put these script tags in my vue.js file.
i have added the html div element to by vue js file and it is getting rendered. but i am just not able to load script from html into vue.
Below is my html file.
<html>
<body>
<script type="text/javascript">
mxBasePath = "../editors/pure";
</script>
<script type="text/javascript" src="../editors/pure/js/mxClient.js"></script>
<script src="../editors/dist/main.js"></script>
</body>
</html>
I have tried to add my scripts in the mounted section of vue. Below is my vue.js file
import * as client from '../editors/pure/js/mxClient.js'
import * as mains from '../editors/dist/main.js'
mounted () {
var z = document.getElementById('geApp')
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', client)
z.appendChild(recaptchaScript)
let processes = document.createElement('script')
processes.setAttribute('src', mains)
z.appendChild(processes)
let basepath = document.createElement('script')
basepath.innertext = 'mxBasePath = "../editors/pure"'
z.appendChild(basepath)
},
But i am getting the error as file not found.. I solved the problem by importing the src file but now i am getting the error as "one of the functionality is not defined."
Please can anyone help me in adding the scripts to vue.js file
I try to build a simple CRUD frontend with no frameworks! I try to integrate a TypeScript file (intex.ts) into my index.html but it keeps beeing not found so that the called functions are undefined. I'm aware that browsers can't handle typescript but need javascript. I build my app before testing and all ts files get compiled. I tried integrating the compiled js file but it's not found either. All my frontend code is in directory src/public.
How do I connect my public/index.html with my public/index.ts so that the fundtions work?
relevant index.html code
<head>
<script type="text/typescript" src="index.ts"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
</body>
all index.ts code
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
error i'm getting when clicking the button
index.html:18 Uncaught ReferenceError: clickButton is not defined
at HTMLButtonElement.onclick (index.html:18)
I use express in the backend and use express.static:
app.use(express.static("src/public"));
It seems to be an error caused because the function is defined outside of the global scope.
You can try to assign the function to the global window object just below of the function declaration:
function clickButton(){
...
}
window.clickButton = clickButton; // Now the function can be accessed from global scope
Also u can try to add the eventlistener on your JS file instead of using the html attribute onclick:
function clickButton(){
...
}
document.querySelector('.button-smth').addEventListener('click', clickButton);
This way you don't need to assign the function to the global scope at all, but you will need to add the class '.button-smth' (or whatever) to the html button element.
Hope this helps!
Your ts need to be compiled to js first. Then, you could possibly use it as follows -
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
<head>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
<div id="cases"></div>
</body>
Note: This is just a possible solution
I have a project with ASP.NET 5 and TypeScript. basically this is my wwwroot folder
-wwwroot
|-app
||-person.js
||-employee.js
||-init.js
|-js
||-libraries.js // Contains: systemjs, ...etc
||-app.bundle.js
person.js is an es6 module which exports class Person.
employee.js imports person.js and exports class Employee.
init.js just imports employee.js, creates a new Employee object and console his name.
//init.js
import { Employee } from "./employee";
var p = new Employee();
console.log(p.name);
Now I bundled the three files into app.bundle.js which is located in the js folder using systemjs-builder which produced three named System.register calls:
System.register("wwwroot/app/person.js",...
System.register("wwwroot/app/employee.js",...
System.register("wwwroot/app/init.js"...
In my index.cshtml view file I have these script tags:
<script type="text/javascript" src="./js/libraries.js"></script>
<!-- 2. Configure SystemJS -->
<script type="text/javascript">
System.config({
packages: {
js: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('js/app.bundle')
.then(null, console.error.bind(console));
</script>
apparently since I have named modules, whatever is in the init.js is not being called.
So my question is, how can I call a named System.register call ?
Note: I am new to es6 modules, so this is a test project to get the idea right.
From this wiki page, I solved my problem with this:
<script type="text/javascript">
System.config({
bundles: {
'app.bundle.js': ['wwwroot/app/init']
},
packages: {
wwwroot: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('wwwroot/app/init')
.then(null, console.error.bind(console));
</script>
To explain:
The bundle extension will automatically download a bundle as soon as an attempt to import any module in that bundle is made.
So all I need to do is to tell systemjs to register the init module to my bundle and it will download the bundle and execute whatever is in the init module.
My problem is that observable and published variables from polymer-elements are not working. More precisely, they are not working if I imported the elements from a package. They are displayed correctly, but they do not react if their value changed.
If i load the same element directly from the main project everything works fine!
I published the complete project on github.com and added a README --> here
So this is what i have done:
I created a package which contains a polymer-element.
The package is called foo_package and my polymer-element uses foo.html and foo.dart.
It is named poly-foo.
foo_package structure
Now I create a new project and prepare everything for using polymer-elements.
In yaml i add a dependency to my package
pubspec.yaml
[...]
dependencies:
foo_package:
path: D:\User\UserName\dart\foo_package
[...]
Now I import foo.html in my html file
<link rel="import" href="packages/foo_package/foo.html">
and implement my custom tag
<poly-foo></poly-foo>
Finally I run my main file and everything looks alright. My element gets displayed the way i want it.
But observables and published variables are not working.
What am I doing wrong?
foo.html
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="poly-foo">
<template>
Counter:{{counter}}
<button on-click="{{increment}}">Up!</button>
<script type="application/dart" src="foo.dart"></script>
</template>
</polymer-element>
foo.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
#CustomTag('poly-foo')
class PolyFoo extends PolymerElement {
#observable int counter = 0;
PolyFoo.created() : super.created();
void increment(Event e, var detail, Node target) {
counter = counter + 1;
}
}
You need a Polymer transformer configuration in you library package (doesn't need any entry points though)
transformers:
- polymer:
entry_points:
I am trying to make an app the generates 'live' graphs of Twitter word counts, basically trying to extend and exercise in Chapter 14 of NodeJS in 24 Hours. I decided to use 'Rickshaw' and I thought I'd start with simply getting a simple example working. However, while I can get a simple html page to load, I can't get a graph to display. Firefox debug indicates: "ReferenceError: Rickshaw is not defined [Break On This Error] graph = new Rickshaw.Graph( { " . That means that there is a referencing error but after a couple of hours of googling and reading, I'm not seeing it. The directory structure is correct; npm installed all modules correctly, no errors. Can anyone see what I'm missing?
Note: I am new to JS/Node and while the book is working in Express 2.x, I have been working in Express 3.x, so not sure if I've got the translation correct in all cases. The code is as follows:
package.json
{
"name":"socket.io-twitter-example",
"version": "0.0.1",
"private": "true",
"dependencies": {
"express": ">=2.5.4",
"rickshaw": ">=1.1.0"
}
}
app.js
var express = require('express'),
rickshaw = require('rickshaw'),
app = express(),
http = require('http'),
server = http.createServer(app)
server.listen(3000);
app.get('/', function (req,res) {
res.sendfile(__dirname + '/index.html');
});
index.html
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>Socket.IO Twitter Example</title>
</head>
<body>
<h1>Rickshaw Example</h1>
<div id="chart"></div>
<ul class="tweets"></ul>
<script type="text/javascript" src="node_modules/rickshaw/vendor/d3.v2.js"></script> //don't think "node_modules/" is required, but doesn't work without either
<script type="text/javascript" src="node_modules/rickshaw/rickshaw.min.js"></script>
<script>
graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 285,
height: 180,
series: [{
color: 'steelblue',
data: [
{ x: 0, y: 40 },
{ x: 1, y: 49 },
{ x: 2, y: 38 },
{ x: 3, y: 30 },
{ x: 4, y: 32 } ]
}]
});
graph.render();
</script>
</body>
</html>
You need to configure express.static middleware so that express knows where to look for static resources like js and css files:
app.use(express.static( __dirname + '/public'));
Its common to put such resources into a public folder (as shown in the example above) or static folder.
If you create a public folder and organize it like
app.js
public
rickshaw
vendor
d3.v2.js
rickshaw.min.js
then you'll be able to have the files correctly loaded in your html using
<script type="text/javascript" src="/rickshaw/vendor/d3.v2.js"></script>
<script type="text/javascript" src="/rickshaw/rickshaw.min.js"></script>
See this section of the express docs for more info on and examples of middleware.