chibineku Posted October 7, 2009 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 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 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 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 Share Posted October 7, 2009 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2009 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 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 Share Posted October 7, 2009 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> Link to comment Share on other sites More sharing options...
chibineku Posted October 7, 2009 Author Share Posted October 7, 2009 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2009 Share Posted October 7, 2009 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. Link to comment Share on other sites More sharing options...
chibineku Posted October 7, 2009 Author 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
Archived
This topic is now archived and is closed to further replies.