Can't get JavaScript to load in Eclipse web application - javascript

I am trying to load JavaScript from an external file in an Eclipse web application.
My folder structure is as follows:
nata
....src
........main
............webapp
................scripts
....................jquery.js
....................nata.js
I invoke the web app by: "localhost:8080/nata/login"
I have tried
<script src="${pageContext.request.contextPath}/nata/login/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/nata/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/scripts/nata.js"></script>
but all to no avail. The Javascript will not load.
Here is my html:
<html>
<head>
<title>First Page</title>
<script src="scripts/nata.js"></script>
</head>
<body>
<h1>JavaScript Load Test</h1>
<p id="demo">This is a paragraph</p>
<button onclick="displayDate()" type="button">Display Date</button>
</body>
</html>
Here is nata.js:
function displayDate() { document.getElementById("demo").innerHTML=Date(); }
When I put the HTML in a windows file (and use the following line)
<script src="nata.js"></script>
in folder X and put nata.js in the same folder X, the JavaScript works perfectly.
I have tried all of the lines below:
<script src="/scripts/nata.js"></script>
<script src="scripts/nata.js"></script>
<script src="nata/login/nata.js"></script>
<script src="/nata/login/nata.js"></script>
<script src="/nata/nata.js"></script>
<script src="nata/nata.js"></script>
and probably several more combinations.
I get the error message "displayDate() is undefined"
Sometimes I get the error message "Syntax error" on line 1 of nata.js. However, as I mentioned above, when I put the same HTML and the same nata.js side by side in a windows folder and open the HTML file with a browser and click the button, the JavaScript works perfectly. I just can't get it to load the JavaScript inside an Eclipse web app.

Related

javascript reports that "$" and "alert" are undefined

Just embarking in learning yet another language (JavaScript) and following instructions from a tutorial. I have node and Brackets (the editor) installed. The tutorial was requesting the following to be put in a file named
"app.js":
$('form').on('submit',function () {
var text = $('#message').val();
alert(text);
return false;
});
The problem I have is that the system immediately complains that "$" (two places) and "alert" are undefined.
The index.html file was originally requested to specify:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="app.js"></script>
at the bottom (which caused the system to complain with an earlier simplified version about 'alert') but I replaced it with the following after visiting the code.jquery.com site:
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="app.js"></script>
This solved the alert issue when the .js file was nothing more than a 'hello world', but now I have a "problem++" with the next version of the .js file shown above.
I suppose it could be something about the installation and/or paths; but I am at a loss figuring where that could be and how to fix it. Can any expert suggest something?
For the record: I am on a Windows 7 machine, using Chrome to display the html file.
Many thanks
Edit:
additional complete text of 'index.html' file:
<link rel="stylesheet" href="style.css">
<main>
<ol id="history">
<li>commander says: no offence, but you are a robot, aren't you?</li>
<li>roobie says: that is correct, sir</li>
<li>cookie says: hey doc, is that a male or a female? </li>
<li>robbie says: this information is meaningless</li>
</ol>
<form>
<input id="initials">
<input id="message">
<button>Send</button>
</form>
</main>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="app.js"></script>
did you add the jquery link twice?
Please remove all jquery links and do the following:
remove all previous jquery links.
Add this code snippet between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Javascript executing incorrectly on Apache Cordova index.js/.html

So in an application I'm writing using Apache Cordova within Visual Studio, I am attempting to add functionality to the default index.html and index.js. However, my code within my index.js is executing very oddly - the debugger in VS shows that the $('#favorite-lot') is executed, but nothing within the .click(function()) method is. Is there any reason why this would be so?
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/JQueryMobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="scripts/JQueryMobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<a id="favorite-lot" href=""><h5>Favorite Lot</h5></a>
</div>
</body>
</html>
Index.js
//This method is called on page load to set the favorite lot on the index page
//the document bit is called, but the if statement within it & ready aren't
//$(document).ready(function () {
$('#favorite-lot').click(function () {
var storage = window.localStorage;
var href = storage.getItem("favoriteLot");
//now redirect
window.location.replace(href);
});
//});
Note I have tried enclosing my function within a document.ready (see commented out code), however the results are the same.
EDIT: So I figured this issue out, and it was a fairly simple error: I wasn't including the jQuery code itself, just jQuery.mobile, and additionally, the jQuery has to load before jQuery.mobile for the .mobile stuff to work. Side note, I also didn't realize .mobile enables Ajax on most links/redirections, and had to disable that for some of my other code; maybe if you've found this post, you're suffering from the other problem as well

Javascript files are not loading

I'm new to Angular JS , trying to develop little application on Calculations .
My Code is as follows"
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
</head>
<body>
<div ng-app="Calculator">
<div ng-controller="Operations">
<div>
Number 1 : <input type="number" ng-model="Number1" />
Number 2: <input type="number" ng-model="Number2" />
<p>
The addition of above two numbers is {{Number1+Number2}}
</p>
</div>
</div>
</div>
<script>
var module = angular.module('Calculator', []);
module.controller('Operations', function ($scope) {
$scope.Number1 = 1;
$scope.Number2 = 10;
});
</script>
</body>
</html>
I have the Javascripts files available in My project, When I run the app, the browser console indicates that the JS are not being loaded. Don't know why !
The Expression {{Number1+Number2}} is the same in browser . It is not executing the expression
The Browser console has following errors:
Failed to load resource:"Path to the Script file" the server responded with a
status of 404 (Not Found)
Failed to load resource:"Path to the Script file" the server responded with a
status of 404 (Not Found)
Uncaught ReferenceError: angular is not defined
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
You are not loading angular.js and angular-route.js properly, check your paths.
Your project structure has to look like
index.html
scripts
|---angular.js
|---angular-route.js
If you use
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>
Please note , you might need to disable adblocks if necessary.
Drag and drop in visual studio doesn't work if you are using HTML pages but it does work for mvc ,asp.netwebforms.
I figured this after one hour

AngularJS error while using ngAudio

I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js

Local jQuery.js file not working

I had downloaded jQuery.js file from jQuery.com .I have saved this file in 3 places, including JRE/Lib and desktop (where my HTML file which calls it is), to be sure that the jQuery.js file is found. I reference this js file as :
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#clas").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas"> Hello</p>
<p>Hi</p>
</body>
When I ran this HTML file on Mozilla browser, I expected 'Hello' to vanish when I clicked on it, but it did not. It remained as solid as ever.
But when I used a jQuery CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
And when I used an online HTML editor called Tryit Editor v1.5, it worked correctly!
It seems only the local jQuery.js is not doing its part. The JavaScript works fine, only the $() part doesn't. I'm using jdk1.6. I wonder why this snag has occurred. How to resolve it? Help.
Thanks! I found the solution to this problem, from a similar question posted in this forum, asked a year ago. Here is the link:
jQuery code doesn't work if I'm using a local jquery.js file, why?
The problem seems to have been incompatible encoding of the html and the js files. So I added the charset attribute to script tag of js. And the problem and 'Hello' both vanished at a click!
Your code works for me. Please check the below code, I have just modified the location of the jquery.js file where mine is stored in a different location.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%--<script type="text/javascript" src="jquery.js"></script>--%>
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#clas").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas">Hello</p>
<p>Hi</p>
</body>
</html>
I assume the location of your js is not correct. Are you using the same path of js where you have this "html" or jsp page? Or you have the js files in a separate folder?
Additionally, you can try alternate way as below:
$("#clas").live("click", function () {
$(this).hide();
});
Please let me know if this helps.

Categories

Resources