jQuery

gestalt · January 9th, 2010, 02:35 AM

Can't understand why jQuery library is not responding. My website is hosted locally on a Unix server w/ Cpanel. Tried creating the "jquery_test.js" file in both TextWrangler and Dreamweaver. Tried using both single ('*') and double ("*") quotes in <head> content, for example <script type='text/javascript', etc. Cpanel file manager confirms all necessary files are on the server. Is it possible that my (hosting) server httpd.conf needs to be set up differently for jQuery library to function properly? This is Example 1-1 from Wrox "beginning javascript and css development with jQuery. I even downloaded both the HTML and CSS source code example(s) and copied them to my (hosting) server. Still, jQuery is not loaded. Ridiculously frustrated! Please help!

Installed jQuery Library Path: /scripts/lib/jquery/jquery_132.js

Javascript File Path: /scripts/run/jquery/jquery_test.js

CSS File Path: /css/jquery.css

HTML DOC (jquery_test.html)

<!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>Untitled Document</title>
<script type='text/javascript' src='/script/lib/jquery/jquery_v132.js'></script>
<script type='text/javascript' src='/script/run/jquery/jqtest.js'></script>
<link href='/css/jquery.css' rel='stylesheet' type='text/css' />
</head>

<body>
<p>jQuery is not loaded</p>
</body>
</html>

JAVASCRIPT DOC (jquery_test.js)

if ($) {
$(document).ready(
function() {
$('p').addClass('tmpFrameworkLoaded');
$('p').text('jQuery successfully loaded and running');
}
);
}

CSS DOC (jquery.css)

@charset "UTF-8";
p {
font-family: Arial, Helvetica, sans-serif;
color: red;
display: block;
margin: 5px;
padding: 5px;
border: 1px solid red;
}
p.tmpFrameworkLoaded {
color: green;
border: 1px solid green;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

Imar · January 9th, 2010, 06:34 AM

Code:

<script type='text/javascript' src='/script/run/jquery/jqtest.js'></script>

I don't see you include jquery_test.js anywhere....

Imar

gestalt · January 9th, 2010, 07:41 AM

Thanks for the reply! Paths to both my javascript doc and jQuery library, along with the CSS doc are shown below. Still won't load/run jQuery. What the heck am I missing???

HTML (jquery_test.html)

Code:

<!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>Test | jQuery</title>
<script type="text/javascript" src="/script/src/jquery/jquery_v132.js"></script>
<script type="text/javascript" src="/script/run/jquery/jquery_test.js"></script>
<link href="/css/gestalt/site/jquery_test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>jQuery is not loaded</p>
</body>
</html>

JAVASCRIPT

Code:

if ($)
	$(document).ready
		function() {
			$('p').addClass('tmpFrameworkLoaded');
			$('p').text('jQuery is loaded and running');
		}
	);
}

CSS

Code:

@charset "UTF-8";
/* CSS Document */

p {
	padding: 5px;
	border: 1px solid #990000;
	color: #990000;
}
p.tmpFrameworkLoaded {
	color:	#006600;
	border:	1px solid # green;
}

Imar · January 9th, 2010, 08:41 AM

Hi there,

A few things you can check / do:

1. Put an alert statement (and nothing else) in your JS files. Does it get called?

2. Use Fiddler (www.fiddlertool.com) to see if any files are missing

3, Move all your code (JS and CSS) to your test HTML file and remove the file references. This way you can determine if it's a code issue or a file dependency issue.

4. Check your code as it doesn't look right to me. You're at least missing the opening { for the if statement and you're missing the parentheses for the ready function. Take a look at the code that comes with the book for a complete example.

Cheers,

Imar