I have this HTML file which use AngularJs javascript file. And I run this application using Tomcat 7
<html>
<head>
<script src="src/main/resources/appjs/angular.min.js"></script> // not working
<script src="/resources/appjs/angular.min.js"></script> // not working
<script src="/src/main/resources/appjs/angular.min.js"></script> // not working
<!-- <script src="angular.min.js"></script> --> // working
</head>
<body>
<h2>Hello World!</h2>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
If I put the JS file in that separate folder it wont work. And If I put it inside the same directory it will work.
What could be the reason for this behavior ?
When giving relative paths with out '/' in the beginning it will start looking for the file relative to the folder where html is present. In you case there is angular.min.js where index.html is located so it works other doesn't.
Your server will be configured to serve files from the "src/main/resources/appjs" directory. If you set the src for your <script> to "angular.min.js" then the server will dish it up fine.. but if you set the src to "src/main/resources/appjs/angular.min.js" then the server is looking for "src/main/resources/appjs/src/main/resources/appjs/angular.min.js", which doesn't exist.
Absolute paths are specified by a URL beginning with a "/", so if you try "/src/main/resources/appjs/angular.min.js" it may work - although security may be an issue and "src" may not be in the root-level directory of your server.
Related
I follow the instruction, but error report like this
my code:
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='./pose/images/aa_090.jpg'/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
console.log(pose);
})
</script>
which is exactly the same as
https://github.com/tensorflow/tfjs-models/tree/master/posenet
Plz do me a favor
I tried the same code snippet and it worked for me without any issue, the cdn also seems to be working when I checked, so the problem could be a few things:
Your image does not exist at the given location
There was some network issue when you attempted this
There is an issue fetching the image locally due to cors : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
Incase the issue persists try downloading the CDN's and the image and host it by following,
In the directory of your files run: python -m SimpleHTTPServer 8000
Go to localhost:8000/yourfile.html
Revert back in case of any issues
I am trying to complete an exercise for one of my courses and my HTML file won't link with my Javascript file. I put the link between my HTML file and my Javascript file in the body of my HTML file but the files still won't connect. When I test this code in Microsoft Edge, the buttons simply do not work. Anybody know what the problem is?
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Page</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<button onclick = "startWorker()">Start Worker</button>
<button onclick = "stopWorker()">Stop Worker</button>
<ul id = "output">
</ul>
<script type = "text/javascript" src = "/js/script.js"></script>
</body>
</html>
Javascript
var worker;
function startWorker(){
worker = new Worker ("js/mod4_worker.js");
worker.onmessage = function(event){
document.getElementById("output").innerHTML += '<li>' + event.data + '</li>';
};
}
function stopWorker(){
worker.terminate();
}
Files
So, I would try my comments :
Change the script.js path to : "../js/script.js"
Change the worker passed script to "../js/mod4_worker.js"
As GGG said, using a path starting with "/", a slash, use the path from root. The full path is either :
Windows : file://DriveLetter:\REST_OF_PATH
Unix/Linux/OSX : file:///REST_OF_PATH
WebServer : http://domain/REST_OF_PATH
If the structure is from /webapp/ :
html/index.html
js/script.js
Accessing script.js from index.html needs to go back one folder (..) and then set the path seen here (js/script.js) which gives (../js/script.js) OR using full path (/webapp/js/script.js) which I wouldn't recommend because if you change "webapp" directory of location or URL (on WebServer)
Remove the / from your src in the index.html. So it should be
src = "js/script.js"
Why? When you begin the src value with a /, that means you're referring to an absolute path (in other words, it starts the path from your drive's root). My devtools shows it as
file:///C:/js/script.js
By removing the first / in your src, you're now doing relative pathing, and it will look in the correct place.
Permissions & File locations
(Stumbled on this Q and here's the only way I solved it...)
For me, I found it was a permissions and file location issue...
I'm running a local webserver on Ubuntu 18 Desktop, working with dev from a local folder linked to the web directory: /var/www/html/MY_DEV -> /home/me/MY_DEV. So, the www-data user couldn't actually "own" them like it needed to.
I use this setup just fine for PHP, HTML, and CSS just fine. But, if I include a javascript file via src="", no matter what I do, it doesn't work.
The only way I could get it to work on my desktop is if BOTH the served file (somefile.php or somefile.html) are physically at /var/www/html/...
And, of course accessing them at localhost/...
And, of course owning them obsessively with sudo chown -R www-data:www-data /var/www/html
In my current project, my work is only with html and css (HTML skinning). There are many pages which have repeated sections like Header, footer, sharing links etc.
I don't want to repeat this common sections again and again in each page. I want these repeated sections to call somehow using gulp or any other task runner.
Something like this for example (using lodash)
Index.html
<!Doctype html>
<html>
<%= _.template(templates['head'])() %>
<body>
<%= _.template(templates['header'])() %>
<!-- some unique content here -->
<%= _.template(templates['footer'])() %>
</body>
</html>
and then using gulp-template rendering it in each page. I am preferring lodash because I had already worked with it.
As you can see, I am assuming that if somehow I keep the repeating sections in a javascript object (with name templates), I can call it in one line code. And then if I change something in that repeating section, the change will occur in all pages.
To make this possible, first I need to generate the javascript object with that repeating html as string in it.
Can someone please tell me how to do this? or is there any better way to do this?
You can use Jade - node template engine
It gives option to include external jade files, where in it allows you to insert the contents of one jade file into another
index.jade:
doctype html
html
include ./includes/head.jade
body
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
head.jade
//- includes/head.jade
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
foot.jade
//- includes/foot.jade
#footer
p Copyright (c) foobar
Compiles to:
index.html
<!doctype html>
<html>
<head>
<title>My Site</title>
<script src='/javascripts/jquery.js'></script>
<script src='/javascripts/app.js'></script>
</head>
<body>
<h1>My Site</h1>
<p>Welcome to my super lame site.</p>
<div id="footer">
<p>Copyright (c) foobar</p>
</div>
</body>
</html>
Explanation:
Whenever I used to search on google for "pre-compiling templates", I was ending up on sites which were combining all the HTML template files to one single js file. But in my case, I was looking for a way to compile the templates completely on system itself with no support of a "all template compiled js file". (So, I was looking for a solution which pre-renders the HTMLs)
Solution:
I found this awesome template engine, Nunjucks, which lets me compile the HTML templates to Independent HTML pages when used with gulp.
Check this one, gulp-nunjucks-render. By using this along with gulp, I am able to include section of .html files into other .html files. Here is the code (assuming you installed nodejs and gulp):
var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
gulp.task('default', function () {
nunjucksRender.nunjucks.configure(['templates/'], { watch: false });
return gulp.src('templates/!(_)*.html')
.pipe(nunjucksRender({
css_path: "../assets/css/",
js_path: "../assets/js/",
img_path: "../assets/images/"
}))
.pipe(gulp.dest('html'));
});
gulp.task('watch', function () {
gulp.watch(['templates/*.html'], ['default']);
});
In the above code, I am keeping the HTML templates in templates folder and with the above gulp code, I am generating the new HTMLs in html folder. The above code will not generate the files which are prefixed with _. (something similar to sass)
and later in command prompt:
gulp watch // Watches the files for changes continuously --> OWNING :D
Here is an example:
<!-- // Index.html -->
<!DOCTYPE html>
<html>
{% include "_head.html" %}
<body>
{% include "_content.html" %}
{% include "_footer.html" %}
</body>
</html>
Which renders to:
<!DOCTYPE html>
<html>
<head>
<title>Website title</title>
<link rel="Stylesheet" href="../assets/jcss/main.css" type="text/css"/>
</head>
<body>
<div class="page">
<!-- content here -->
</div>
<div class="footer">
<!-- footer content here -->
</div>
</body>
</html>
Advantages:
No need of server support to compile the templates.
No need to include any pre-compiled js file in index.html.
Whenever we do some change in common section, no need to include that section again in every page.
Disadvantages:
Till now, I didn't find any :).
I have added new Javascript library to the “ApplicationResources”:
jquerymobile{
resource url:'css/jquery.mobile-1.3.2.css'
resource url:'js/jquery.mobile/jquery.js'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js'
}
Than I used this library in the main.gsp:
<g:javascript library="jquerymobile"/>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<g:layoutBody/>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
<g:javascript library="application"/>
<r:layoutResources />
</body>
The result HTML was that grails concatenates both js files into one and place the script tag at the end.
.
.
.
<div id="spinner" class="spinner" style="display:none;">Loading…</div>
<script src="/Tiv2/static/bundle-bundle_jquerymobile_defer.js" type="text/javascript" ></script>
<script src="/Tiv2/static/js/application.js" type="text/javascript" ></script>
</body>
</html>
This causes bad behavior in the page. When clicking a link, I can see that the address bar in the browser get changed but page is not refreshing and stay on the current page where the link was clicked.
Only after manually refreshing the page (F5), browser load the linked page.
I tried using regular tags and all worked ok.
How do I prevent Grails from combining js files into one?
Thanks
You would want to use the exclude argument when declaring your resources so the bundle mapper doesn't run.
jquerymobile{
resource url:'css/jquery.mobile-1.3.2.css', exclude: 'bundle'
resource url:'js/jquery.mobile/jquery.js', exclude: 'bundle'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js', exclude: 'bundle'
}
The documentation covers this and is quite good. You should always start there.
Another option is
jquerymobile{
defaultBundle false
resource url:'css/jquery.mobile-1.3.2.css'
resource url:'js/jquery.mobile/jquery.js'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js'
}
This will disable bundling for all resources in this module
I'm having problems including local javascript files into my html that is on the play framework. The paths are correct and I even tried including the javascript file in the same directory. However, imports from the web (the main libraries i'm using) work just fine.
#(execId: String)
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript" src = "../../public/javascripts/profilesJS/stack.js"> </script>
</head>
<body>
<input id="profiles" type="button" value="Profiles" />
<script type="text/javascript">
alert(tester());
</script>
</body>
</html>
the javascript file simply looks likes this
function tester(){
return "test";
}
And the error i get is:
tester is not defined
at the line with the alert
According to the assets documentation (and routing in general) you need to use the reverse routing in your template:
<script type="text/javascript" src='#routes.Assets.at("javascripts/profilesJS/stack.js")'></script>
it builds the correct src path to your /public/javascripts/profilesJS/stack.js file (by default routing config it will be /assets/javascripts/profilesJS/stack.js)