I have a problem where loading a JavaScript library via CDN works, but serving it from my own server with bower doesn't. The following is a minimal example of what is happening (just a HTML file that can be opened directly):
Loading system#0.16.11.js from a CDN
<html>
<head>
<script src="https://jspm.io/system#0.16.11.js"></script>
</head>
<body></body>
</html>
If I open the Firefox Web Console and enter System, I get:
System
Object { normalize: f/e.normalize(), locate: m/e.locate(), fetch: c/e.fetch(), translate: d/e.translate(), instantiate: d/e.instantiate(), _loader: Object, baseURL: "file:///…", paths: Object, originalSystem: Object, noConflict: $__global.upgradeSystemLoader/p.noConflict(), 17 more… }
Loading system#0.16.11.js from a local directory
Then I downloaded the JavaScript file into the same directory as the HTML file and modified it to:
<html>
<head>
<script src="system#0.16.11.js"></script>
</head>
<body></body>
</html>
If I enter System in the console now, I get:
System
ReferenceError: System is not defined
I should add that window.upgradeSystemLoader is present, which is a function that is defined in the JavsScript library. So at least the file is being detected.
What is the difference? I am trying to serve System.js via bower from my own server, but I always end up in this situation: CDN works, local file doesn't.
Something is missing es6-module-loader#0.16.6.js i think systemJs helps you load that js file. If you check your console. you would find that that es6-module is missing.
In the system file it requires this src="'+basePath+'es6-module-loader#0.16.6.js
You can either download it or change the path in the systemJs source file
You could download it here es6-modules
Related
I downloaded this d3 JavaScript project from GitHub https://github.com/mcaule/d3-timeseries, and then I created an HTML page (index.html) to run the project. This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./d3_timeseries.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script type="text/javascript" src="./d3_timeseries.js"></script>
<script type="text/javascript" src="https://mcaule.github.io/d3-timeseries/dist/create-example-data.js"></script>
<body>
<div id="chart"></div>
<script>
var data = createRandomData(80,[0,1000],0.01)
var chart = d3_timeseries()
.addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"})
.width(820)
chart('#chart')
</script>
</body>
</html>
I have a problem in d3_timeseries.js with this two errors:
NOTE: I don't want to use min files
The exact file that you have linked, d3_timeseries.js, is not written in such a way that it can be used, without processing, in a browser.
Its very first line import * as d3 from "d3"; will fail, no matter what browser, because "d3" is not a URL that can be evaluated correctly from a browser context. It is not a relative URL, it is not a
It looks like it is intended to be utilized by webpack or some other script bundler. If you used this in a webpack context to bundle your code, it would load "d3" from node_modules.
I know that you said that you "don't want to use min files", so your options are either compile your own bundle or just use the min files in the /dist folder.
I'm assuming you used the file in the src directory. This isn't a regular javascript file, it's node. Luckily the author is buidling what looks to be a web safe version in the dist folder. That version is minified, uglified, and ran through babel.
You rarely want to include files from src or files that aren't uglified. That will cause your webpage to load extra white space data that it does not need.
Description
Jquery is not working from local disk -using a downloaded copy of any jquery version does not work ok.
it works ok from ref links over the internet.
per jquery documentation - it is suppose to work from local disk as well
(i.e script src = "local path"...).
my code works fine with reference external links to jquery lib (versions 2.2.4 , 3.2.1 ) no problem
whenever i try to fallback or just use the local downloaded file for the same version it fails!
the relevant code is
<script src async = './jquery-3.2.1.min.js'></script>
or just
<script src = './jquery-2.2.4.min.js'></script>
and i tried several other workarrounds including pasting the whole file into my html as script) none worked neither on chrome nor firefox windows 7-8 node-8.9.1
tried similar to the following as well:
<script>window.jQuery || document.write('<script src="jquery-2.2.4.min.js"><\/script>')</script>
error message is:
detailed error: ReferenceError: $ is not defined
detailed error: TypeError: pageExecute is undefined
one suggested solution is: use dev server.
what is dev server and why needed? means what? so i can not just use the local copy of jquery lib?
node.js does not serve ANY files by default (unlike some other web servers). So, if you want the jQuery file to be served by your own web server, then you need to create a route that serves that file or use something like express.static() that serves multiple files.
Since your web URL is http://localhost:6060/example1, you are loading the web page through your own web server. Therefore any script tag such as:
<script src="jquery-2.2.4.min.js"></script>
will be requested form your own web server as:
http://localhost:6060/jquery-2.2.4.min.js
If you don't have a route defined for that specific URL in your node.js server, then you will get an error. If you are using Express in your node.js server, then you either need something like:
app.use(express.static("/someDirPath"));
to create a middleware handler that will automatically look in /someDirPath for files that are requested. Or, you need to make specific routes for files you want to serve:
app.get("/jquery-2.2.4.min.js", function(req, res) {
res.sendFile("/somePath/jquery-2.2.4.min.js");
});
In my design projects, I make a URL distinction between static files and dynamic routes. I use /public at the beginning of the URL path for any public resource as this makes it simple to distinguish which request is for a static resource and which is for a dynamically served route. So, in my script file, I'd use:
<script src="/public/js/jquery-2.2.4.min.js"></script>
And, then on my server, I'd use:
// serve static resources from the public directory below our project
app.use(express.static("/public", path.join(__dirname, public)));
And, then I'd have a directory structure of public static files:
myAppDir
various server files
- public
- js
- css
- img
Issue with file path
If both js and html file in same folder then use:
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
I meet a problem when using pdf.js to view pdf. The problem comes from the
PDFJS.workerSrc setting. Is that possible to include the pdf.worker.js in
header, like
<script type="text/javascript" src="./../jsfiles/pdf.worker.js"></script>
and not using
PDFJS.workerSrc = './../jsfiles/pdf.worker.js';
is that possible for that? Thanks a lot.
From the documentation:
In order to bundle all src/ files into two production scripts and build the generic viewer, run:
$ gulp generic
This will generate pdf.js and pdf.worker.js in the build/generic/build/ directory. Both scripts are needed but only pdf.js needs to be included since pdf.worker.js will be loaded by pdf.js. The PDF.js files are large and should be minified for production.
This means that you only need to add the following code:
<script type="text/javascript" src="pdf.js"></script>
Remember that all files generated should located in the same directory as pdf.js
In the Jangaroo tutorial using Maven it states"include a Jangaroo application script generated by the Maven build process". This should be created in src/main/webapp/index.html, it isn't. Can anyone explain this, or what in the pox.xml is missing?
Thanks
The misunderstanding here is that actually, the Jangaroo application script is generated, not the index.html file.
The idea is that your index.html usually contains custom HTML, e.g. loading your CSS or setting up some context. The only Jangaroo-specific things your HTML code has to do is load the generated joo/jangaroo-application.js script and run the application's main class, using its fully-qualified name (in this example, HelloWorld is in the top-level package):
<script type="text/javascript"
src="joo/jangaroo-application.js"></script>
<script type="text/javascript">
joo.classLoader.run("HelloWorld");
</script>
https://github.com/CoreMedia/jangaroo-tools/wiki/Tutorial-~-Deployment
I'm trying to load external scripts from a folder into my createnew.html file and I keep getting this error saying it cannot be found:
Failed to load resource: the server responded with a status of 404 (Not found)
I'm trying to load the scripts in the head of my code, like this:
<head>
<!--C3 CSS script-->
<link href="./scripts/c3.css" rel="stylesheet" type="text/css">
<!--C3 JS script-->
<script src="./scripts/c3.min.js"></script>
</head>
My files are arranged like this:
->public
->views
-createnew.html
->scripts
-c3.css
-c3.min.js
Please help me understand why this doesn't work.
As this question became more popular than expected, I decided to point other problem-havers in the right direction:
Let's say you have organized your files like this:
- server.js
-> MyWebsite(folder)
- index.html
-> js(folder)
- myscript.js
The paths you use are relative to the "working directory" you are in.
When not using a server, and only developing websites locally on your computer, this working directory will be the relative path from your index.html file to your scripts. In this case it would be ./js/mysript.js.
When using a server you need to tell it where this working directory is. In the case of Node.js you would do something like this app.use(express.static('./MyWebsite')) and your js files would be referenced by /js/myscript.js
Notice that when loading from a server you prefix with / instead of ./ since the / really is just a part of the URL to your file hosted by your server, while ./ is specific to the file system.
Change
"./scripts/c3.css"
to
"scripts/c3.css"
You can refer to this question about the relative path of files in HTML.
To refer to the current folder,
./ works only in non-strict doctype mode, while . works in both modes.
So you may try "scripts/c3.css" instead of "./scripts/c3.css"