This question already has answers here:
Uncaught ReferenceError: $ is not defined error in jQuery
(4 answers)
Closed 7 years ago.
Hi as new Developer I've never actually created a JS file from "scratch" before and when I try to write something basic to see if my jQuery works dev tools just tells me "reference error". I thought at the end of a js doc i just added like }); (jQuery, window) or something along those lines but nothing I've tried has worked.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<script type="text/javascript" src="default.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<head>
<link rel="stylesheet" href="default.css" type="text/css" />
<title></title>
</head>
<body>
<div class="container">
<div class="column"> Solution Assessment</div>
<div class="column"> Design</div>
<div class="column"> Build</div>
<div class="column"> Deploy</div>
<div class="column"> Test</div>
<div class="column"> Live (BAU)</div>
</div>
</body>
</html>
basic js
// JavaScript source code
$( document ).ready(function() {
// Your code here.
});
I'm assuming I need to reference in the js page as well but I've no clue what the correct syntax is... Sorry for the 'newbie' question I've been looking for an hour or so and not been able to google properly.
First you run your script which tries to use jQuery:
<script type="text/javascript" src="default.js"></script>
Then you load jQuery:
<script src="jquery-1.11.3.min.js"></script>
You can't use jQuery before you load it. Swap the order of your scripts.
Related
I have build a website with an iframe to display multiple subpages.
My goal is to change the value of an ID on the parent window, from the child page that is loaded in the Iframe. All the pages are in the same domain. I am currently using the following code, and it works fine in Internet explorer, but doesn't do anything in Chrome? I hope someone will have the awnser to fix it so it will work in all browsers.
Thank you in advance!
Here's the html of the parent window:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Webpage</title>
<base target="iframe">
<!-- External Javascript -->
<script src="javascript/index.js"></script>
<!-- External CSS -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Banner -->
<div class="Banner">
<div id="Site-name">
Text to be changed
</div>
<img class="Logo" src="Afbeeldingen/Logo.png" alt="logo">
</div>
<!-- Body -->
<div class="iframe">
<iframe name="iframe" src="iframe.html"></iframe>
</div>
<!-- Footer -->
<div class="Footer">
<div class="copyright">
Made by Jan Pieter van den Oever 2019 All rights reserved ®
</div>
</div>
</body>
</html>
And here is the java script of the index file:
function changeText(text) {
document.getElementById('Site-name').innerHTML = text;
}
Here is the iframe html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>iframe</title>
<!-- CSS -->
<link rel="stylesheet" href="css/iframe.css">
</head>
<body>
<div class="Button-container">
<div class="Button-center">
<div class="Button" onclick="location.href='nextpage.html';parent.changeText('The new text to be displayed in the parent')">
<div class="Button-text">
<br><br><br>
Start
</div>
</div>
</div>
</div>
</body>
</html>
With jQuery:
function changeText(newText) {
$('#Site-name').text(newText)
}
Just include jQuery in your project and replace the changeText function with the above one. If the above code doesn't work, try the below one:
function changeText(newText) {
$(document).find('#Site-name').text(newText);
}
It's so confusing, so you are under the same domain, sub-domain too I guess?
Domain is not the only indicator of same origin, you could try to iframe yourdomain.com/proxy.google.com as an example. So for all your browser cares that is still a different origin, or else don't iframe it. Calling it .html is meaningless, you can have it .exe and the browser will still attempt to render the dom.
This issue arises when you're trying to merge 2 incompatible frameworks quick and dirty, like for example you need an interface where the main is using ExtJS and the child is Angular... And the only proper/legal/right answer is.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You might get lucky and find a hack of some sort but believe me it will only be temporary. PostMessage was written exactly for this purpose, so 2 globals can safely communicate and react to events.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I write some Javascript code using jQuery that should insert a symbol into one div when you click on another div. Nothing happens.
I used some code to check if jQuery loaded properly and it is.
HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<!--<script src="jquery-3.4.1.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="keyboard.js"></script>
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>
Javascript:
$(".key").click(function(event) {
$(".field").text="a";
alarm("asdfsdf");
});
No error messages.
Also tried this:
$(".key").on("click",function() {
alarm("asdfsdf");
$(".field").text="a";
});
wrap your code in document.ready. and you are suing jquery so it shoud be text() function.
$(document).ready(function(){
$(".key").on("click",function() {
$(".field").text("a");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field"></div>
<div class="key" id="a key">key</div>
I am trying to use Materialbox in Materialize, but the zooming effect does not seem to work. While the CSS hover works, clicking does not enlarge the image as it should.
I have tried both the jQuery method and the non-jQuery method shown on the site. I have made sure that jQuery is loaded before the script, and tried both including the script in the html in tags as well as putting it in another file.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<!--This is the where the image is-->
<img class="materialboxed" width="300" src="assets/model.jpg">
</div>
</div>
</div>
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<!--I used the provided code on the Materialize website-->
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>
</html>
Looking at the console, I get three errors:
Loading failed for the with source “file:///Users/ned/Desktop/website/js/jquery-3.4.1.min.js”.
ReferenceError: $ is not defined
The character encoding of the HTML document was not declared. The document will render with...
My editor throws the ReferenceError as well whenever I try to use the code snippet in a separate file.
Try this:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/materialize.min.js"></script>
instead of this:
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
Actually, materialize itself uses jQuery in its code, so you must include jQuery first then materialize.min.js.
It works for me.
I am creating an app and would like to use the SpinWheel widget from Dojo.
Currently, all I am trying to do is get the working example of the SpinWheel Widget from the site, http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SpinWheel.html#id4, functioning
Unfortunately, I cannot seem to do this.
I have tried:
Using the declarative code from the example online. I pulled both the dojo and dojox repos from github, and know that they are in the correct locations because the Hello Dojo tutorial worked perfectly with my paths. Code (mostly copied from site in bold above) is below.
What happens: None of the Dojo code works. The title shows up, as does the ".", but nothing else.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojo SpinWheel</title>
<!-- load Dojo -->
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
</script>
<script>
require([
"dojox/mobile/parser",
"dojox/mobile/SpinWheel"
]);
</script>
</head>
<body>
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">Custom SpinWheel</h1>
<div id="spin1" data-dojo-type="dojox/mobile/SpinWheel">
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labels="['A','B','C','D','E','F','G','H','I','J','K']"
style="text-align:center;width:40px;"></div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labelFrom="3000" labelTo="3100"
style="width:70px;"></div>
<div id="pt" class="mblSpinWheelSlot"></div>
<div id="txt" class="mblSpinWheelSlot">.</div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labelFrom="0" labelTo="9"
style="width:30px;"></div>
<div data-dojo-type="dojox/mobile/SpinWheelSlot"
labels="['pt','px','cm']"
style="width:50px;"></div>
</div>
</div>
</body>
</html>
Your example can't work, because:
You don't call parser.parse()
You don't require all modules used by declarative syntax
You don't load mobile theme
Assuming that DOJO is unpacked in the root of your htdocs of your Apache, the working head of your HTML file should look like that:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Dojo SpinWheel</title>
<!-- load Dojo -->
<script src="/dojox/mobile/deviceTheme.js"></script>
<script src="/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
"dojox/mobile/parser",
"dojox/mobile/SpinWheel", "dojox/mobile/View", "dojox/mobile/Heading", "dojox/mobile/SpinWheelSlot"
], function(parser) {
parser.parse();
});
</script>
</head>
See also the examples under dojox/mobile/tests. They usually do work, contrary to many examples from Dojo online docs :(
I've been having trouble implementing jQuery - in particular, replicating this exercise from Code Academy. I understand from this other question on Stack Overflow that the <script> referencing jQuery.js needs to be placed before the <script> referencing the local JavaScript file in order for the $(document).ready(); to be recognized.
As such, here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Behold!</title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
</head>
<body>
<div id="menu">
<h3>jQuery</h3>
<div>
<p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>jQuery UI includes even more jQuery goodness!</p>
</div>
<h3>JavaScript</h3>
<div>
<p>JavaScript is a programming language used in web browsers.</p>
</div>
</div>
</body>
</html>
And then here is my index.js:
$(document).ready(function() {
$("#menu").accordion({collapsible: true, active: false});
});
In both Chrome and IE, this displays as a entirely blank page, with no trace of the jQuery accordion or text whatsoever.
Please let me know if I'm overlooking something - I really appreciate the help. Thanks!
This:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.j" type="text/javascript"></script>
Should be this:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
I don't know if this error is just from copy'n'paste but the file extension is incorrect (should be "js" and not "j").
Furthermore you do not include jQuery itself (only jQuery UI).
Use the following head-Area:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
These work for me.