i have js file named defined_tools.js iside folder js .
i wrote simple function in it
function xxxx(){
alert("rt");
}
now in my index page i included the file by this line
<script type="text/javascript" src="js/defined_tools.js"></script>
and in the head scope i write this code to execute xxxx() function
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
xxxx();
});
</script>
i got error in chrome console
Uncaught ReferenceError: xxxx is not defined
MY FULL PAGE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Site</title>
<link rel="stylesheet" type="text/css" href="css/defaults.css"/>
<link rel="stylesheet" type="text/css" href="css/devtool.css"/>
<!-- Jquery Library -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/defined_tools.js"></script>
<script type="text/javascript" src="js/core_osx.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
xxxx();
});
</script>
</head>
<body>
<!-- Tool Dev -->
<div id="tooldev" class="ToolSize">
<div id="new_panel" class="ToolCommands"></div>
<div id="new_text" class="ToolCommands"></div>
<div id="new_image" class="ToolCommands"></div>
</div>
<div id="workspace" class="DefaultWorkspace">
</div>
</body>
</html>
In defined_tools.js file, try to change function definition for this:
document.xxxx = function() { alert("RT");}
And import the jQuery file after the defined_tools.js.
Related
I have created a small HTML page in which jquery library is being called but I am getting Uncaught ReferenceError: $ is not defined.
The code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript">
$(document).ready(function(){
$.get('fetch.php/adds/3',function(data) {
$('#div-adds').html(data);
});
});
</script>
</head>
<body>
</div>
<div id="parent-container">
<div class="middle-cont" id="result-div">
<div class="left-panel">
<div id="div-restaurants"></div>
</div>
<div class="right-panel">
<div id="div-adds"></div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
</html>
Any idea?
Thanks
Ordering problem. Loading the library after executing the code? change order to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get('fetch.php/adds/3',function(data) {
$('#div-adds').html(data);
});
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../../fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="../../fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
</head>
<body>
<a id = "single_image" href = "images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt=""/></a>
<script type="text/javascript">
$(document).ready(function(){
$("a#single_image").fancybox();
});
</script>
</body>
</html>
I'm trying to get fancybox to display an image but it just keeps linking to the image externally. This is the very shortened version of my code but it still won't work properly as is. Typically, this issue is caused by loading jQuery twice, but that doesn't seem to be the case here.
Make sure to use the instructions given here http://fancyapps.com/fancybox/
Working code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="../../fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="../../fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<a class="fancybox" rel="group" href="images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
The html file is
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website /title>
<link rel='stylesheet' type='text/css' href='stylesheet4.css'>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'>
</head>
<body>
<!--other code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>
and my script3.js file is
$(function(){
"use strict";
$('#checkOut').click(function(){
var time=2;
alert("The time is "+time+"!");
// more code
});
how am I linking it wrong?
when i used jfiddle to test my code, the alert works when i click the button. however, i'm using notepad++ and i'm not sure what I'm doing wrong.
I see two issues, and something else you should fix.
In the script3.js, you have a missing });. So it should be:
$(function(){
"use strict";
$('#checkOut').click(function(){
var time=2;
alert("The time is "+time+"!");
// more code
});
});
The title tag is not formatted correctly:
<title>My Website /title>
Needs to be:
<title>My Website </title>
EDIT: Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website </title>
<link rel='stylesheet' type='text/css' href='stylesheet4.css'>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'>
</head>
<body>
<!--other code -->
<input type="button" id="checkOut" value="check out" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>
</body>
</html>
Is there anything missing in this html snippet .??
datepicker is not getting populated, ErrorConsole showing error that-
'textBox.datepicker is not a function'
in below code;
var mydatepicker = var mydatepicker = textBox.datepicker();
Can someone help please.?
Thats my working copy of your code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var textBox = $('#mdatepicker');
var icon = $('#myButton');
var mydatepicker = textBox.datepicker();
icon.click(function () {
mydatepicker.datepicker("show");
});
});
</script>;
<form id="form1" runat="server">
<input type="text" id="mdatepicker" value="date" />
<input type="button" id="myButton" value="PopUp"/>
</form>
Is datepicker not a function from the jQuery-UI library?
If so, then you need to include a script reference to the jQuery-UI Library.
EDITS
No You need to add a script reference to the jQuery-UI library and jQuery-UI Css file
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="src of desired theme" />
Are you giving full refrences to js files. Including jquery and datepicker's .js files.
The issue is in this:
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
I can not see any js files regarding datepicker in your head tag where you've included all js refrences.
There must be some file like:
<script type="text/javascript" src="Scripts/datepicker.js"></script>
or something like that, which you are missing to include.
Hope this helps.
if you use jquery datepicker, the 'myButton' object is not necessary, datepicker will handle it for use, see the code:
<html>
<head><title>jQuery Open on button</title>
<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
</head>
<body>
<form>
<input id="date" type="textbox"/>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#date").datepicker({ showOn: 'button', buttonText: "select" });
});
</script>
</body>
</html>
<?php
//require 'includes/db.inc.php';
require 'includes/configs.inc.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php $site_name ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/jquery.imageTickBox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input:[type=checkbox]").imageTickBox({
tickedImage: "/images/checked.png",
unTickedImage: "/images/unchecked.png",
imageClass: "tickbox"
});
});
</script>
</head>
<body>
<div id="mirror" class="center">
<!--some code deleted-->
<input type="checkbox" id="Music" name="hobbies[]" value="Music">
<!--some code deleted-->
</div>
</body>
</html>
any wrong with the code above????name index.php and put it on root dir.
but not work , i see the jquery checkbox plugin guide at
http://blog.leenix.co.uk/2009/10/jquery-plugin-imagetickbox-change-any.html
ALWAYS close your script tags, even if using external resources.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
You need to close the jquery script tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>