I have a probably very simple problem that is completely spoofing me.
I have got a web server (XAMPP) running off a reasonably slow usb stick.
I've got a very simple file structure:
--htdocs
--projects
--callback
index.html
--js
jquery-1.9.1.min.js
callbackclient.js
--css
main.css
For some reason, I can't get a simple linked script working:
Here is my index.html
<!DOCTYPE HTML>
<html>
<head>
<script src='js/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='js/callbackclient.js' type='text/javacsript'></script>
<link href='css/main.css' rel='stylesheet' type='text/css'>
</head>
<body>
This is a test
</body>
<script>
$(document).ready(function(){
tester();
});
</script>
</html>
And here's my callbackclient.js:
function tester(){ console.log("test");
}
When I hit localhost/projects/callback the browser displays "This is a test" as expected, but I get an error in the console:
Uncaught ReferenceError: tester is not defined
I get the same if I try to run tester(); from console directly, yet $("head") correctly selects the head element which I guess means jQuery is being loaded fine.
I must have missed something fundamental - someone please enlighten me!
It could be that you misspelled the type on the script tag. text/javacsript instead of text/javascript
Try this inside your callbackClient.js:
var tester = function (){ console.log("test"); }
If that works, you just need to have the function be set to a variable, and then call it. If that doesn't work, then I would just remove the JS code on your HTML page and do this inside your callbackClient.js:
jQuery(function () {
// Logic here
console.log('this is working, right?');
var functionName = function () {
console.log('blah blah blah')
}
functionName();
})
Hope that helps!
Related
I feel like there is something very little I'm doing wrong, but I can't find it. I can't figure out how to call an externally-defined function from within a script tag, it keeps giving me ReferenceError's.
I've reduced my code to the most minimal, so here's what I've got. This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button id="mrbutton" type="button">Mr Button</button>
<div id="barChart"></div>
<script src="d3/d3.min.js"></script>
<script src="d3/charts/bar.js"></script>
<script>
chartParams = {};
document.getElementById('mrbutton').addEventListener('click', () => {createBarChart(chartParams)});
</script>
</head>
</html>
d3/d3.min.js is D3 version 3. Here's what I have in d3/charts/bar.js:
'use strict';
const createBarChart = params => {
console.log('hello there!');
};
console.log('script loaded!');
But when I load up the page, the Javascript console spits out:
script loaded!
Uncaught ReferenceError: createBarChart is not defined
If I move the code in d3/charts/bar.js into the <script> tag in the HTML, it works fine, but I want to reuse the code so I want it external. What am I doing wrong? Why can't I call createBarChart?
Update: Using Babel to compile down to Ecmascript2015 doesn't change anything, still the same ReferenceError. Also changed the event listener to an arrow function.
Update: I removed the D3 code and am just calling a console.log(), but still no luck.
I got it to work. Not sure if this will help anyone else (hopefully it can), but I just restarted my computer. That's all; no code changes whatsoever. My original code works fine now (even the original .addEventListener()).
It wasn't a browser caching issue, since I tried several browsers in private mode, and I still really don't know what the problem is. If anyone has any idea what it was, please do comment, I'm still puzzled despite being able to move on.
I'm making a game in JS using P5, and I came upon a problem.
In my html file I have references to .js files:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="main.js"></script>
<script src="isKeyPressed.js"></script>
<script src="blocks.js"></script>
<script src="player.js"></script>
</head>
<body>
</body>
</html>
I have one .js file defining the function isKeyPressed():
function isKeyPressed(keyQuery) {
var did = false;
for(var i = 0; i < keysPressed; i++) {
if(keysPressed[i] === keyQuery) {
did = true;
}
}
return did;
}
I reference this in another object inside player.js:
player.motion = function() {
if(isKeyPressed('w')) {
this.velocity.add(0,-5);
}
if(isKeyPressed('s')) {
this.velocity.add(0,5);
}
if(isKeyPressed('a')) {
this.velocity.add(-5,0);
}
if(isKeyPressed('d')) {
this.velocity.add(5,0);
}
}
But when I try to call player.motion, I get the error:
Uncaught TypeError: isKeyPressed is not a function
Does anyone know why this is occurring?
For the record, I don't think the accepted answer is correct. Specifically, I don't think the accepted answer really changes anything from what you were originally doing. My guess is that you had another problem in your code (like a syntax error) that was causing this error, and you fixed that in the process of implementing the suggested solution. So while it might look like the solution fixed your problem, really it was something else.
I'm providing this alternative answer so you don't think you have to define your JavaScript in your html directly, as that is definitely not the case.
I tried testing out your setup by creating a smaller example consisting of three files:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="one.js"></script>
<script src="two.js"></script>
</head>
<body onload="printObj()">
</body>
</html>
one.js
function printOne(){
console.log("one");
}
two.js
var obj = {};
obj.printTwo = function(){
console.log("two");
printOne();
}
function printObj(){
obj.printTwo();
}
This is pretty much exactly what your setup is, and it works fine. You absolutely do not need to put your JavaScript in your html. As long as the JavaScript files are correctly loaded in the proper order, then you can use functions and variables from one file in another file.
There are two main things that could cause your problem:
Are your files correctly loaded?
Are there any syntax errors you haven't noticed? (This is my guess as to what caused your original problem.) Check the JavaScript console, and try running some test code to actually run the functions you're trying to call.
Did you get all the file names correct?
Are you behind a firewall, or are there other network problems that might cause a problem with loading?
Are your files loaded in the proper order?
For file two.js to access code defined in one.js, you have to make sure one.js is loaded before two.js. It looks like you've done this correctly, but are you sure the JavaScript is where you think it is?
In other words, are you sure it was in player.js and not in main.js?
You might want to get rid of this ambiguity by placing related JavaScript in the same file. It doesn't make a ton of sense to have one file define a keysPressed array and then another file use that array to define an isKeyPressed() function. Just put them in the same file, and make sure that file is loaded before other files that use it.
The accepted answer doesn't change anything with regard to when stuff is loaded. Unless you had a syntax error, or the player.motion() function was actually in the main.js file, or you had a network loading problem, your code should have worked. So one of those things must be your actual problem. You do not have to define your JavaScript in your html for it to work.
I recommend not making a file name have capitals. So change it from
<script src="isKeyPressed.js"></script>
to
<script src="iskeypressed.js"></script>
also change the file name too.
You could try something like this
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="main.js"></script>
<script src="isKeyPressed.js"></script>
<script src="blocks.js"></script>
<script src="player.js"></script>
<script>
player.motion = function() {
if(isKeyPressed('w')) {
this.velocity.add(0,-5);
}
if(isKeyPressed('s')) {
this.velocity.add(0,5);
}
if(isKeyPressed('a')) {
this.velocity.add(-5,0);
}
if(isKeyPressed('d')) {
this.velocity.add(5,0);
}
}
</script>
</head>
<body>
</body>
</html>
This is importing all functions from the isKeyPressed.js file and therefore you are able to reference it in the <script> tag. You were not able to use isKeyPressed.js's functions in player.js because you cannot reference it.
So, lets say you have a page that wants to load from a javascript file and it includes
temp.html file
<script src="example.js"></script>
<p class="one"></p>
Now in the example.js file you have a function that is
function getInfo() {
var place = "foo"
$(".one").html(place);
}
//Edit currently I call the function inside the JS file
getInfo();
My question is how would you connect the two files so that the external javascript file knows that it is pointed to the paragraph with the class one?
Normally when this is in a single page, you would call the function and the info will be set.
I have seen a getScript method and a load method for Jquery. Would that be applicable here?
Any ideas on how to approach this? If you provide some code that will be super helpful.
Thanks in advance.
Looks like you want to execute getInfo() as soon as it's defined (i.e.: example.js is loaded).
You can try this approach:
<script src="example.js" onload="getInfo();"></script>
In your example.js, change getInfo() to something like this:
function getInfo() {
$(document).ready(function() {
var place = "foo"
$(".one").html(place);
});
}
Your language is confusing, but you could use jQuery's $(document).ready function which would suffice. Generally speaking, an externally loaded file should execute where the tag is in the script.
A hack could be to place a tag before the end of your document body, give it an id, and then use $('#id').ready() there. In general though, you could just try coding the transclusion concept (I'm guessing you're used to this) from scratch using intervals and timeouts.
<div id="rdy">
</div>
</body>
Then in your file:
$('#rdy').ready(getInfo);
Just my added opinion, you should consider that Google is up to some not-so-nice things these days, they are long-gone from the "do no evil" mantra.
If we assume you have a JavaScript file that contains this content:
function getInfo() {
var place = "foo"
$(".one").html(place);
}
then your markup will look something like this:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="example.js"></script>
<script>
$(function(){
getInfo();
});
</script>
</head>
<body>
<p class="one"></p>
</body>
</html>
$(function(){ ... }); is just the simplified version of $(document).ready(function(){ ... });. They both more or less handle the onload event, which fires when page has finished loading.
Below is the content in my external js file.
Please i only have one function in my js file and i am calling this function
from one of .cshtml file during onload event.
function startJs()
{
$("#tabs").tabs();
getImages();
var imgCount = 0;
var imgArray = new Array();
}
Running this code i get the error saying "$ is not referenced". I get the same "not referenced error if i use the keyword JQuery.
I also tried declaring the function like this but still getting the same message.
$(function () {
$("#tabs").tabs();
});
How can i make the Jquery symbols work in external js files. I feel that i am missing something very simple here but i just can't figure out what i am missing.
Please note i am making a call to this code from a file that has a reference to Jquery.
Anybody has any solution to this? Thanks in advance.
Your HTML should look like this, note the order of the JS files:
<html>
<head>
...
<script src="jquery.js"></script>
<script src="yourCustomFile.js"></script>
</head>
<body>
...
</body>
</html>
On my index.html I am doing the following:
<script src="jquery/jquery.js"></script>
<script src="managment.js"></script>
<script src="jquery/jquery.mobile-1.1.0.js"></script>
After doing some calculation, I have the need of using a function from the managment.js file:
$.getScript("managment.js", function(){
alert("Script loaded and executed.");
login();
});
}
And finally the managment.js file:
<script type="text/javascript">
function login(){
alert("asdasdasdasdasdasd");
}
</script>
My issue, is that the login() function is never called. Actually the alert I have inside getScriptfunction is not called either, but the strange thing is that if I check if the jquery.js file is loaded the alert is called. More, if I try to call login() without doing getScriptnothing happens has expected. My files structure is the following:
(note: you can see that I am using 2 managment.js files. I tried both approaches to see if the problem was with the path of the file.)
What am I missing here? For relevance, I am using PhoneGap, but this isn't working on the browser as well.
The management.js file should not contain the <script type="text/javascript"> tag. It should be:
function login(){
alert("asdasdasdasdasdasd");
}
Hope it helps! :)