Getting unexpected identifier error in line 12 while writing a couchapp
I am trying to call a javascript function in recordedit.js when anyone clicks on add item link.
<!DOCTYPE html>
<html>
<head>
<title>Items </title>
<link rel="stylesheet" href="style/main.css" type="text/css">
<script src= "vendor/couchapp/loader.js"></script>
<script src= "recordedit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
updateItems();
}
$("a.add").live('click', fucntion(event){itemform();});
</script>
</head>
<body>
<div id ="store"></div>
<h1>Store</h1>
<div id="items"><div id="additem">Add Item</div>
<div id="all"></div>
<div id="itemform"></div>
</div>
</body>
</html>
fucntion is miss spelled, and you are not including your jQuery? Or is that within the loader?
Should be:
$("a.add").live('click', function(event){itemform();});
Related
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
I am trying to implement galleria.js in my webpage. I have followed the documentation and have created index.html accordingly. All I am getting is the compilation of the images one after another, but not the galleria view.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div class="gallery">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out2.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:800,
height:600
});
});
</script>
</body>
</html>
I checked the docs of galleria.js but I think the issue is basically the selector in your code. You are getting an element with id "gallery" and you dont have any element with that id,just an element with that class :)
$('#gallery').galleria({
ans I think it should be
$('.gallery').galleria({
After several attempts the following works fine with me. I have missed to put https:// before the jquery address.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div id="gallery">
<img src="galleria/im/out.jpg">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:1450,
height:740
});
});
</script>
</body>
</html>
I trying to load my html page using backbone framework .I am using backbone-marionettejs file.I need to show load my my template while using router functionalty in backbone .could you please tell me where i did wrong ? here is my code
http://goo.gl/cnrE7c
<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
<!--script type="text/javascript" src="lib/json2.js"></script-->
<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script type="text/javascript" src="lib/backbone.marionette.js"></script>
<script type="text/javascript" src="router/router.js"></script>
<script type="text/javascript" src="view/first.js"></script>
</head>
<body>
<div>
<div id="header">
</div>
<div id="contend">
<p>Here is static content in the web page. You'll notice that it gets
replaced by our app as soon as we start it.</p>
</div>
<div id="fotter">
</div>
</div>
<script type="text/javascript" src="view/first.js"></script>
</body>
<script>
$(document).ready(function(){
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion:"#contend"
})
ContactManager.on("start", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
})
</script>
</html>
I've tried using the google api and my own jQuery.js file, and I'm checked it through a lot and my javascript code seems to be good, so I'm guessing it's something obvious between linking jQuery to the web page that I'm missing
Here's the code on JSFiddle
<!DOCTYPE html>
<html>
<head>
<title>COMPUTERS.</title>
<link rel="stylesheet" type="text/css" href="cstyle.css">
<script type="text/javascript" src="cscript.js"></script>
</head>
<body>
<div id="navhead" align="center">
<div id="navleft" class="nav">
<p class="valign">Copyright and Patents</p>
</div>
<div id="navcentre" class="nav" align="center">
<p class="valign">Computer Misuse</p>
</div>
<div id="navright" class="nav">
<p class="valign">Data Protection</p>
</div>
</div>
</body>
</html>
Javascript:
$(document).ready(function(){
$(".nav").mouseenter(function(){
$(this).fadeTo("slow", 1);
});
$(".nav").mouseleave(function(){
$(this).fadeTo("slow", 0.5);
});
});
Where is the jquery.js
Include that in your file to work..
Add this line before your js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Updated Fiddle http://jsfiddle.net/hzE4M/2/
I tried your code in JSFiddle. It works.
$(".nav").mouseenter(function(){
$(this).fadeTo("slow", 1);
});
$(".nav").mouseleave(function(){
$(this).fadeTo("slow", 0.5);
});
http://jsfiddle.net/Alex_Zhe_Han/EmJZQ/
<head>
<title>COMPUTERS.</title>
<link rel="stylesheet" type="text/css" href="cstyle.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="cscript.js"></script>
</head>
your code is ok .just add this line.