Jump to content

Jquery Test Page Won't Work...


chibineku
 Share

Recommended Posts

I just got a book on jQuery from my cousin who is obsessed with it, and in the space of 50 pages I can see why - it has excellent syntax, smoothes over cross browser compatibility problems, the DOM traversal is excellent...but my first tiny little basic trial script won't work!Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>jQuery test</title><style type="text/css">.red {color: red;}</style><script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javscript" src="test.js"></script></head><body><div id="test"><p>The content of the body element is displayed in your browser.</p></div></body></html>

Here is text.js:

$(document).ready(function() {$('#test p').className('red');});

When I run this, nothing happens. I first tried it without wrapping the paragraph in a div, and just using $('p') to reference it, but that failed. I have tried adding a basic JS alert to the function and it does not appear, so it's like the function isn't firing, but I've copied the syntax to the letter, even tried the shortcut $() to reference the document. I shouldn't be failing this hard this soon. I have checked the source in Firebug and the jQuery library is being imported correctly, applying .red class does, as you would expect, make the text red.

Link to comment
Share on other sites

Yes and yes - when I view the source in Firebug it's all there. I will copy, character for character, the first example from the book, but this is hardly more complicated. I thought perhaps the problem was that I had saved the HTML portion as a php5 file because my .htaccess file tries to rewrite .html endings to .php5, but I have moved it to a different domain and saved it as .html and it still doesn't work.

Link to comment
Share on other sites

And if you add an alert, it doesn't show up?

$(document).ready(function() {alert('ready');$('#test p').className('red');});

What if you add this block before the end of the </body>:

<script type="text/javascript">$('#test p').className('red');</script>

Link to comment
Share on other sites

Can you post the completed script, ds, because I tried addClass as well and it still didn't work.

Link to comment
Share on other sites

test.js$(document).ready(function() {$('#test p').addClass('red');});XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>jQuery test</title><script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript" src="test.js"></script><style type="text/css">.red {color: red;}</style></head><body><div id="test"><p>The content of the body element is displayed in your browser.</p></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

What the...how the...another little proof that the interwebnets hates me. Thank you! But, what did you change? It looks the same...Even when I make tweaks like make the stylesheet external and drop the #test selector, it still works. Do you do voodoo?

Edited by chibineku
Link to comment
Share on other sites

did you correct error in<script type="text/javscript" src="test.js"></script>edit: by removing #test from $('#test p').addClass('red'); it will still work, as it will assign the class to all paragraph tags found, whether in container #test div or not.

Edited by dsonesuk
Link to comment
Share on other sites

Oh, no, I didn't. Oh how embarassing - even when you first mentioned it, I didn't see the problem. One letter - it's always one letter!Cheers, my man. If you are a man...are you a man? Does it matter? Are you a machine? You're not the lawnmower man, are you???

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...