chibineku Posted October 7, 2009 Report Share Posted October 7, 2009 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 More sharing options...
justsomeguy Posted October 7, 2009 Report Share Posted October 7, 2009 Are your script files named correctly, everything is getting included? Link to comment Share on other sites More sharing options...
chibineku Posted October 7, 2009 Author Report Share Posted October 7, 2009 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 More sharing options...
justsomeguy Posted October 7, 2009 Report Share Posted October 7, 2009 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 More sharing options...
dsonesuk Posted October 7, 2009 Report Share Posted October 7, 2009 (edited) which is it?<script type="text/javscript" src="test.js"></script>or Here is text.js:EDIT just noticed error<script type="text/javscript" src="test.js"></script> Edited October 7, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2009 Report Share Posted October 7, 2009 OK! i got this to work but by not using .className('red') but using .addClass('red') Link to comment Share on other sites More sharing options...
chibineku Posted October 7, 2009 Author Report Share Posted October 7, 2009 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 More sharing options...
dsonesuk Posted October 7, 2009 Report Share Posted October 7, 2009 (edited) 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 October 7, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
chibineku Posted October 7, 2009 Author Report Share Posted October 7, 2009 (edited) 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 October 7, 2009 by chibineku Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2009 Report Share Posted October 7, 2009 (edited) 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 October 7, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
chibineku Posted October 7, 2009 Author Report Share Posted October 7, 2009 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now