Hey there I have checked over more jQuery questions like this than I care to recall but I really cannot seem to figure this out.
The following code just WILL NOT work locally. Haven't had a chance to test it online yet, but surely I should be able to test locally.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html lang='en' xml:lang='en' xmlns="">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery test</title>
<link rel='stylesheet' type='text/css' href='/root/WebDev/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css'/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="/root/WebDev/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/root/WebDev/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="height: 20px;width:20px;background-color:red;position:relative;top:50px;left:50px;"></div>
</body>
And the jQuery code:
$(document).ready(function(){
$('div').click(function(){
$('div').effect('explode');
});
});
just as a note, I do have those jquery files locally.
Hey there I have checked over more jQuery questions like this than I care to recall but I really cannot seem to figure this out.
The following code just WILL NOT work locally. Haven't had a chance to test it online yet, but surely I should be able to test locally.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns="http://www.w3/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery test</title>
<link rel='stylesheet' type='text/css' href='/root/WebDev/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css'/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="/root/WebDev/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/root/WebDev/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="height: 20px;width:20px;background-color:red;position:relative;top:50px;left:50px;"></div>
</body>
And the jQuery code:
$(document).ready(function(){
$('div').click(function(){
$('div').effect('explode');
});
});
just as a note, I do have those jquery files locally.
Share Improve this question edited Apr 30, 2013 at 13:32 Undo♦ 25.7k38 gold badges112 silver badges131 bronze badges asked Apr 3, 2013 at 3:01 Daniel BowenDaniel Bowen 672 silver badges9 bronze badges 4- Any errors in your JavaScript console? Also, why do you appear to include the jQuery file 3 times? – Chris Hayes Commented Apr 3, 2013 at 3:03
- 2 your jquery should e first in the list of js files.... what is jquery.js and jquery-1.9.1.min.js loaded that too from different paths... – PSL Commented Apr 3, 2013 at 3:03
- you loaded 2 jquery-1.9.1 in incorrect sequence? – Raptor Commented Apr 3, 2013 at 3:06
- "And the jQuery code:" ...where did you put it? What is the right path? – Roko C. Buljan Commented Apr 3, 2013 at 3:22
3 Answers
Reset to default 5First put jQuery, than the other plugins, scripts, libraries that make use of jQuery!
<script type="text/javascript" src="/root/WebDev/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/root/WebDev/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
For the last one, if that's the file where you have your functions, make sure the path is also the right one,
I'm not quite sure for this path you used:
/root/WebDev/jquery-ui-1.10.2.custom/js/jquery-1.9.1.jsAre
jquery-ui-1.10.2.custom/js/really the names of your folders? :)And why you don't use
Google Hosted Librariesand some niceHTML5markup:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis./ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="myfunctions.js"></script>
<meta charset=utf-8 />
<title>All you need</title>
</head>
<body>
<div style="height: 20px;width:20px;background-color:red;position:relative;top:50px;left:50px;"></div>
</body>
</html>
Try removing the leading slashes from your href and src attributes.
The reason is the web itself cant find the jquery file. Try to use page.resolveurl
Page.ResolveUrl to always return its URLs as an app-absolute path.
Resolve URL always gives you the root of virtual directory.
e.g.
<script type="text/javascript" src='<%=page.resolveurl("~/javascript/jquery-ui.js")%>'></script>