CODEWITHSUNDEEP
javascriptjqueryuser-interfaceload
Daniel Bowen
Daniel Bowen

Reputation: 51

Can't Get jQuery to work 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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns="http://www.w3.org/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.

Upvotes: 2

Views: 6276

Answers (3)

Goi
Goi

Reputation: 1

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>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

First 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.js

  • Are jquery-ui-1.10.2.custom/js/ really the names of your folders? :)

  • And why you don't use Google Hosted Libraries and some nice HTML5 markup:

<!DOCTYPE html>
<html>
<head>
<link  href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/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>

Upvotes: 5

Ken Herbert
Ken Herbert

Reputation: 5236

Try removing the leading slashes from your href and src attributes.

Upvotes: 0

Related Questions