Trouble getting started with JQuery

I and trying to get started with JQuery “jQuery: Novice to Ninja “ But I cannot get the program to recognize the jQuery command.

<!doctype html>
<html>
<head>
<title> JQuery_Test </title>
<script type=‘text/javascript’ src=‘jquery-1.2.6-min.js’></script>
<script type=‘text/javascript’ src=‘script.js’></script>
</head>
<body>
$(function() { alert(‘Ready to do your bidding!’); });
<script>
alert(“Hello World.”);
</script>
</body>
</html>

The Script “Hello World” works fine but the JQuery function ‘Ready to do your bidding!’ just prints the line a though it was plane text. The file ‘jquery-1.2.6-min.js’ is in the same folder as the html file “JQuery_Test.html”.

To see the program on the web go to http://www.wantadavenport.com/Jq_test/JQuery_Test.html

Any help anyone can give would be most appreciated.

Roy

J. Roy Davenport
<snip/>


$(function() { alert('Ready to do your bidding!'); });

Put simply, this tells jQuery to run the supplied function when the document has finished loading (don’t confuse that with page, which also includes images, css etc). So jQuery ‘waits’ until the </html> tag has been loaded, then it runs the function, showing your alert.


alert("Hello World_xx");

This tells javascript to open your alert immediately, whether the document’s finished loading or not.

Thank you very much, it appears that you have found the last of several errors I made.

What a difference a little js will do for you.
I now have two pop-ups it surprised me though the “Hello World_xx” poped up first then the “Ready to do your bidding!”
I guess when I learn more about jquery I’ll understand why. I think I read somewhere that jquery doesn’t do any thing until the program is finished loading. That way the script alert is acted upon when the program load that line.

I think I know what happened: to make sure that the spelling was correct i copied and pasted but XP does not show the extension along with the file name, so when I copied I forgot to add the .js.

once again thank you for your help.

Nice to know it solved the problem. How such tiny mistakes give us all big heads. I have it all the time.
Anyway, just started with JQuery aswel 10 days ago. It’s a nice and easy thing! Keep on going!

I did find the jquery-1.2.6.min.js was spelled differently jquery-1.2.6-min.js
note the ‘-’ before min in place of a ‘.’ before min
I changed that but still a blank screen,and no pop-up or error 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>
<html>
<head>
<title> JQuery_Test </title>
<script type=“text/javascript” src=“jquery-1.2.6.min”></script>
<script type=“text/javascript” src=“script.js”></script>
</head>
<body>
<script type=“text/javascript”>
/<![CDATA[/
$(function() { alert(‘Ready to do your bidding!’); });
alert(“Hello World_xx”);
/]]>/
</script>
</body>
</html>

The screen should be blank, but you should get a popup with the text “Ready to do your bidding!”

If not, I’d say the file jquery-1.2.6-min.js doesn’t exist or is spelled slightly differently (my favorite mistake to make …)

I guess there won’t be a problem in the jquery script:
<script type=“text/javascript” src=“jquery-1.2.6.min.js”></script>
But you forgot to put ".js " at the end right now.

But maybe there could be an error in the other script you’re loading:
<script type=“text/javascript” src=“script.js”></script>
I don’t know what that script does, maybe check aswel with a debugger.

Thank you so much for your help

I think I did every thing you said (I think) and I still get a blank screen - no error code just a blank screen.

View changes below.

<!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>
<html>
<head>
<title> JQuery_Test </title>
<script type=“text/javascript” src=“jquery-1.2.6-min.js”></script>
<script type=“text/javascript” src=“script.js”></script>
</head>
<body>
<script type=“text/javascript”>
/<![CDATA[/
$(function() { alert(‘Ready to do your bidding!’); });
alert(“Hello World_xx”);
/]]>/
</script>
</body>
</html>

Do you get any error messages?

And the page will be blank, there’s no content in it :wink:

First thank you for your help.

I made the changes as you suggested but now I just get a blank screen when I run the program in either Firefox or IE.

<!doctype html>
<html>
<head>
<title> JQuery_Test </title>
<script type=‘text/javascript’ src=‘jquery-1.2.6-min.js’></script>
<script type=‘text/javascript’ src=‘script.js’></script>
</head>
<body>
<script type=“text/javascript”>
$(function() { alert(‘Ready to do your bidding!’); });
alert(“Hello World_xx”);
</script>
</body>
</html>

A few general comments to the HTML if I may:


<!doctype html>

Do you intend to use HTML5? If not, use your favorite search engine to search for “doctype”


<script type='text/javascript' src='jquery-1.2.6-min.js'></script>
<script type='text/javascript' src='script.js'></script>

Single quotes are not allowed for attributes in HTML. It should be:


<script type=[COLOR="Red"]"[/COLOR]text/javascript[COLOR="Red"]"[/COLOR] src=[COLOR="Red"]"[/COLOR]jquery-1.2.6-min.js[COLOR="Red"]"[/COLOR]></script>
<script type=[COLOR="Red"]"[/COLOR]text/javascript[COLOR="Red"]"[/COLOR] src=[COLOR="Red"]"[/COLOR]script.js[COLOR="Red"]"[/COLOR]></script>


<script type="text/javascript">
$(function() { alert('Ready to do your bidding!'); });
alert("Hello World_xx");
</script>

It’s good practice (in my opinion at least) to put some comments around javascript such that (very) old browsers don’t output it plaintext. Like so:


<script type="text/javascript">
[COLOR="SeaGreen"]/*<![CDATA[*/[/COLOR]
$(function() { alert('Ready to do your bidding!'); });
alert("Hello World_xx");
[COLOR="SeaGreen"]/*]]>*/[/COLOR]
</script>

Browsers that do not understand javascript won’t show it, because it’s enclosed in <![CDATA]>, whereas browsers that do understand javascript will ignore this <![CDATA]> because it’s in javascript comments

:slight_smile:

PS. For the purpose of being able to follow the book it’s probably a good idea to stick to jQuery 1.2.6 for now, but note that jQuery is currently on version 1.4.2

The line containing your jQuery code should be in script tags too:



<script type="text/javascript">
$(function() { alert('Ready to do your bidding!'); });
alert("Hello World.");
</script>