I have an spring mvc app where in my main page, I need use an javascript file. I try include the file this way:
<script type="text/javascript" src="js/index.js"></script>
but when I running the application, the system behavior seems like no script is running. T also try this:
<script type="text/javascript" src="<c:url value='js/index.js'/>"></script>
but the result was the same. Someone have any idea why this is happening?
ps.: the entire code of my page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HorarioLivre</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
<header>
<div class="container">
<h1>HorarioLivre</h1>
<nav>
<ul>
<li>Eventos</li>
<li>Cadastrar Horarios</li>
<li>Listar Horarios</li>
<li>Usuarios</li>
<li>${usuario.nome}
<ul>
<li>Perfil</li>
<li>Configurações</li>
<li>Sair</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div id="results">
Fechar
<div id="content"></div>
</div>
</body>
</html>
The script should open my subpages in a pop-up windows, but they are being opened in the browser window.
** UPDATE 1 **
My index.js is:
$(document).ready(function(){
setupPopup();
});
function setupPopup() {
$('a').click(function() {
$('#content').load($(this).attr('href'));
$('#container').append('<div id="cover">');
$('#results').fadeIn(500);
popupPosition();
});
$('#close').click(function() {
$('#results').fadeOut(100);
$('#cover').remove();
});
$(window).bind('resize', popupPosition);
}
function popupPosition() {
if(!$("#results").is(':visible')){ return; }
$("#results").css({
left: ($(window).width() - $('#results').width()) / 2,
top: ($(window).width() - $('#results').width()) / 7,
position:'absolute'
});
$('#results').draggable();
}
but when I running the application, the system behavior seems like no
script is running.
This is because the browser is unable to load the javascript 'index.js' from the specified location. If you open the browser console and go to the 'networks' tab, you will see 404 (resource not found) against it. You cannot specify a relative URL to a JavaScript in a JSP file that way.
You need to provide your folder structure (where index.js is located in your project) and how you have configured web.xml. But if you try the following, it will surely work:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>
And then keep the 'js' folder containing 'index.js' at the same level as 'WEB-INF'.
Check the path of the index file and then make sure that the code is correct.I assume that js is a folder.Post the index.js code.
In hopes of saving others the half hour it cost me to resolve this, VHS's answer needs an update for anyone who has upgraded to Jakarta. The reference needs to be: <script type="text/javascript" src="${jakarta.servlet.jsp.PageContext}/js/index.js"></script>
If "myJavascript.js" is located in same dir as jsp page:
<script type="text/javascript"><%#include file="myJavascript.js" %></script>
Related
I am trying to instantiate a class in one JavaScript file in another HTML file but I keep on getting this error.
Here is the code for the JavaScript file:
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
And here is the code for the HTML. It should be noted that I am also using chessboard.js and chess.js and that everything is saved in the same folder.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="css/chessboard.css" />
</head>
<body>
<script src="js/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="js/json3.min.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/chessboard.js"></script>
<script src="class.js"></script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
What is causing this error and how can I fix it?
This could be a result from improper file locations, like #sideroxylon said, js/class.js instead of class.js.
"The HTML <base> tag is used to specify a base URI, or URL, for relative links." https://www.tutorialspoint.com/html/html_base_tag.htm This could be another reason your file is inaccessible.
It could also be from certain URL's being blocked. Try opening Developer Console (CTRL-SHIFT-I or F12) and looking for any errors on your page.
If you're loading over HTTPS any content from an HTTP source may be blocked. Here is your exact code (using online versions of each library) but with the class.js file loaded in as a regular script tag and including the starting <body> tag.
https://jsfiddle.net/ckazwozg/ As you should see, it is working quite well.
Edit: For convenience, here is the raw source code from the JSFiddle.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" href="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.js"></script>
<script>
// class.js
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
</script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
I had the same error however what I did was ensure all my files are been saved to the root folder in your case I think that's js(since all your extension points to that location) in my case I've used only the file name after giving it javascript extension (.js) e.g...
I am trying to reference external js file inside my html as follow, did I miss something? The pie chart is supposed to appear but I am not getting it.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_src
<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Your code has 4 main problems:
You didn't call jQuery inside the HTML document <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>, that must be called before the plugin
You called twice the plugin: both the minified and not minified version (if available, always request for the minified version since it's lighter)
You requested the plugin over HTTP instead the always better HTTPS
You didn't call the function inside the document with $(".pie").peity("pie")
Here's a working snippet.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>
</head>
<body>
<div>
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span>
</div>
<script>
$(document).ready(function() {
$(".pie").peity("pie");
});
</script>
</body>
</html>
There are three changes to be made in your code.
You need to include jQuery.
You need to call the peity() function on the span.
You need not include both jquery.peity.js and jquery.peity.min.js. Including either one is sufficient.
See code below.
$(document).ready(function() {
$("span.pie").peity("pie");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Seems you have missed the JavaScript snippet
1. Loading order Should be changed ,
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.pie").peity("pie");
});
</script>
</head>
<body>
<div><span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span></div>
<body>
</html>
In addition to the other answers, your Dojo snippet isn't working because you're trying to load the Peity plugin over HTTP from a page being served over HTTPS. Your web browser console will tell you that the browser blocks loading mixed content from an HTTPS page.
Load peity.js from https://benpickles.github.io/peity/jquery.peity.js. But when you publish your site, download peity.min.js and host it on your own server. Github is not a CDN.
I need some helping loading my JavaScript game on Chrome.
I wanted to code the traditional Snake game in JavaScript using a framework called p5.js, and I started with the canvas. The problem happens when I open the JavaScript file in Chrome (which I linked in my index.html file with a script tag).
Instead of the grey canvas appearing, per my JavaScript code, the code itself shows up on the Chrome page. Here's my code, have a look:
HTML
Snake | JS
<body>
<script src="F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src="F:\Code\JS\Snake\sketch.js" type="text/javascript"></script>
</body>
</html>
And here's the JS:
function setup() {
createCanvas(800, 800);
}
function draw() {
background(51);
}
Specs:
Chrome, Windows 10 Anniversary Edition.
P.S. Javascript is enabled, I have checked.
Try these things
1) Test your js code on www.codepen.io/pen/, some javascript doesn't run properly when local. (F:\Code)
2) Try to put your script at the end of the body tag. Attention that the scripts are loaded in the order they appear. Consider the dependencies.
Assuming the path F:\Code\JS\p5\p5-zip\ to your files are correct and you are not working in a zipped folder.
You should have a file like index.html, wich will be the root of your website.
Here's a minimal example, including your scripts:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src = "F:\Code\JS\Snake\sketch.js" type = "text/javascript"></script>
</body>
</html>
Your javascript files should be placed in the bottom of the page,
just before the closing body tag
You must reference your js file in a good order for preventing some dependency issues
If you are able to browse your index.html file, right click on the page -> "show source code" and try to click on your js files reference, if the path is not correct you will have a 404 not found error.
It should be easy,
but as easy as it should be I can't solve the problem.
If I'm typing the following HTML and JS code into an online editor,
everything works fine but if I'm typing this into my (offline) editor it won't work.
Here's the online code:
http://jsbin.com/kenurunahu/1/edit?html,js,output)
I bet it has something to do with the loading order and how the files are linked.
Thats how my (lokal) HTML-file looks like (where the files are linked):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
<script src="Script.js"></script>
</head>
<body>
<p id="demo">
something
</p>
</body>
</html>
Many Thanks for Help!
[Update]
Firefox and Chrome display the JS file. Sometimes I get an error message that says 'innerHTML is null', but if I write the same code into the console everything works fine.
you have the error when the js script is loaded before the html dom is fully loaded by the browser. A simple solution for your testing is to place the script include at the end of your html page, like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
A better solution is to run your script only when the dom is fully loaded. For example with the body onload event :
<body onload="yourFunc()">
Or event better by using only js code, for example with jquery ready function or by writing a simple custom handler that should work on all major browsers :
document.addEventListener("DOMContentLoaded", function(event) {
//call your func here
});
Hope that helps.
A few guesses:
Capitalization is important. If the file is named script.js do not link to Script.js
Is your js file in the same folder as the index.html document? Because that is what you are saying.
Normally, we arrange our file structure something like this:
public_html
- css
- js
- img
- inc
If your styles/scripts are stored in sub-folders, such as js and css, then you must amend your references to:
<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>
As a good practice, your scripts should be placed at the closing of body tag. External scripts are blocking and hence it would make sense we do not put them at the top. Also, when your script placed at the top runs, your DOM may not be ready, which means any element your script is trying to access may not be present in DOM at all which results in your error.
Hence, all your scripts should be at the closing of body tag. That way when the script loads and runs, you can be assured that the DOM is ready.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
$("#tabs-2").load("something.html");**
});
$(function() {
$( "#datepicker" ).datepicker({maxDate: new Date(1997,11,31)});
});
</script>
</head>
<div id="tabs">
<ul>
<li>Alienware and Alpha</li>
<li>More About</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1">
<p>blah blah</p>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div> <br>
<div id="mini">
<p><span class="italics">Please complete the form</span></p>
<fieldset>
<form id="appForm" action="submit.php" method="post">
**Some form details here (avoided to make the post more readable)
</form>
</div>
</body>
</html>
here is my something.html code:
<html>
<head>
<title>Ajax tab 2 </title>
<meta charset="utf-8">
</head>
<body>
<p>This is p2!!</p>
</body>
</html>
I've already had a thread about this, but none of the suggestions were useful. So Im making another one. .load method does not produce any results at all. Intially i thought this was some sort of browser issue, hence i tried all possible browsers and even tried it on different OS's just to be sure. But it still doesn't work. There is no error displayed. In fact there is nothing from 'something.html' displayed on tab2(i.e "More about") at all. In brief, the .load method does not really load anything from 'something.html'
UPDATE: SOLUTION: this does not work locally, it works just fine when both the index file and 'something.html' are uploaded onto a server
If "something.html" is a file you've created yourself, maybe try to include that file as a link <link href="something.html"> in the header. Not sure if it's going to work but try.
When dealing with jQuery Ajax usually the url is where the server access the data. Get it? You probably have an external file so you try as mentioned above.
Surely somebody mentioned this in your other post... but you probably have to enclose it in a $(document).ready(. Otherwise, the javascript could execute before the #tabs-2 element loads.
$(document).ready(function(){
$("#tabs-2").load("something.html");
});
Check out the documentation for more info.
I have some notes about your question:
If you are testing, running your files with file protocol (opening your files with the browser) AJAX (XMLHttpRequest) will not work in some browsers, such as Chrome. But if you start your local server on localhost for example, your AJAX requests will work properly.
When loading partial content, you should not include it as a full HTML document, so get rid of the <html> and <body> wrappers for your partial content. something.html only should contain: <p>This is p2!!</p>
If you are including scripts that depends on DOM elements at <HEAD> then you should add the defer attribute to your <script> tags, OR move your <script> tags at the end of <BODY> OR you should wrap your code to run when the DOM is ready:
$(document).on("ready", function() { /* CODE HERE */ });
// Shorthand for $(document).ready()
$(function() { /* CODE HERE */ });