Head First jQuery

Errata for Head First jQuery

Submit your own errata for this product.


The errata list is a list of errors and their corrections that were found after the product was released. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color Key: Serious Technical Mistake Minor Technical Mistake Language or formatting error Typo Question Note Update



Version Location Description Submitted By Date Submitted Date Corrected
PDF
Page 16
First code sample (anonymous function)

Code snippet for attaching an anonymous function to an event should end with ");"

Note from the Author or Editor:
First cloud - top left should read as follows: $("button").click(function(){}); Adding the ); at the end of the existing text,

Michael McGrew  May 04, 2012  Jun 28, 2013
PDF
Page 16
Second code sample

hide; should be hide();

Note from the Author or Editor:
Confirmed. Please replace the code in the middle left cloud with that suggested by the error reported. $("p").hide();

Anonymous  May 14, 2012  Jun 28, 2013
Printed
Page 57
Exercise

The formula for the random number between 5 and 10 is not correct. The fix proposed by another commenter is also not correct. If given a random real number between 0 inclusive and 1 exclusive, i.e. [0, 1) then a random integer between 5 and 10 is given by: Math.floor(Math.random() * 6) + 5 Math.random() --> Real number [0, 1) Math.random() * 6 --> Real number [0, 6) Math.floor(Math.random() * 6) --> Integer [0, 5] Math.floor(Math.random() * 6) + 5 --> Integer [5, 10] An important feature of this formula is that it protects the uniformity of the distribution. Thank you

Note from the Author or Editor:
What the error reporter outlined is correct. This line: Math.floor(Math.random() * 5) + 5 needs to be replaced with this line: Math.floor(Math.random() * 6) + 5 On the following pages: 57, 58 (x2), 61, 64, 69, 70 . Downgrading to a minor mistake, since the code would give a number between 5 and 9, as opposed to 5 and 10.

Anonymous  Nov 30, 2012  Jun 28, 2013
Printed
Page 58
"Do this!" box

The code reads alert(discount); Using this, only the discounted amount will pop up. It should read alert(discount_msg); This will display the message, "Your Discount is " plus the random discount amount.

Note from the Author or Editor:
This is correct and confirmed. The line of code should read: alert(discount_msg); It is correct in all other places it is mentioned.

A.J.  Jun 23, 2013  Jun 28, 2013
Printed
Page 59
Exercise

Actually we want to append the discount_msg variable to the element, not the discount variable.

Note from the Author or Editor:
The exercise description at the bottom should read: With what you know about selectors already and your new append powers, write the code to append the discount_msg variable to your guess_box element.

None  May 14, 2012  Jun 28, 2013
Printed
Page 117
Exercise

There should be a semicolon instead of a period at the end of the fourth line of code.

None  May 15, 2012  Jun 28, 2013
Other Digital Version
120
in the code

Kindle Version The book has the following: discount = "<p>Your Code: CODE"+my_num+"</p> ; There is no ending double quote before the semi-colon. The statement should show as follows: discount = "<p>Your Code: CODE"+my_num+"</p>";

Note from the Author or Editor:
This is a confirmed error. Please replace the noted line with the solution proposed by the error reported.

Michael Moore  Jun 03, 2012  Jun 28, 2013
Printed
Page 162
below image for slice example

$(".menu_list").children().slice(1,3); should point to li items 1 and 2. Illustration only points to item 2. Also text is incorrect. It indicates items selected are between the two index numbers you put in parentheses. It should indicate items selected start with the first index and continue up but not including the end index. The correct selection is shown on page 164 in the example: $(".menu_list").parent().slice(1,3); where indexed items 1 and 2 are selected. The error on page 162 is easily confirmed by adding the following code and seeing which items get hilighted: $(".menu_list").children().slice(1,3).css('background-color', 'red');

Note from the Author or Editor:
This is confirmed. In order to select the item that is indicated by the arrow, the code (ONLY on page 162), should read as follows: $(".menu_list").parent().slice(2,3); - the comment beside it should read: "In this case, only one element will be returned - the third li element"

Steve Pincus  Nov 26, 2011  Jun 28, 2013
PDF
Page 162
last code/image

In the last section, where you use the filter method, you point out two arrows out of it, showing that it will select both ul with the organic class... In fact, it will only select the top one, since we START at the second ul (with the class menu_list AND organic) and THEN select the parents (which, of course, doesn't include the current element). So, in fact we start at the "li" above the second "ul" and move up... so we end up with only the top ul selected...

Note from the Author or Editor:
Page number of error: 162 Location on the page: The second line of annotated code reads as follows: $(".menu_list").parents().filter(".organic"); Two arrows come off of the highlighted code that reads filter(".organic") The bottom arrow should be removed.

Nelson Therrien  Aug 11, 2012  Jun 28, 2013
Printed
Page 181
CSS declaration

The last CSS declaration is "#text_top", but the ID for the header on the previous page has an ID of "top". When corrected, the lightning images tested on p198 won't make the header disappear when the images fade in.

Note from the Author or Editor:
Page number of error: 181 Location on the page: CSS declaration for my_style.css fragment at bottom right of page The current style rule is incorrect. It reads as follows: #text_top { position: relative; z-index: 4; } It should be changed to read as follows: #top { position: absolute; left: 191px; top: 15px; z-index: 4; } When corrected, the lightning images tested on p198 won't make the header disappear when the images fade in.

Rachel Hannie  Mar 17, 2012  Jun 28, 2013
PDF
Page 194
Bottom, explanation of setTimeout-function

You state that setTimeout first calls a function and then waits a passed amount of milliseconds to call thast function again - this is not true, as setTimeout first waits the passed amount of milliseconds and then calls the function. It does not call the function before waiting for the given amount of milliseconds.

Note from the Author or Editor:
Page number of error: 194 Location on the page: Bottom, explanation of setTimeout-function Detailed description of error: You state that setTimeout first calls a function and then waits a passed amount of milliseconds to call thast function again - this is not true, as setTimeout first waits the passed amount of milliseconds and then calls the function. It does not call the function before waiting for the given amount of milliseconds. The annotation that points to the setTimeout currently reads as follows: The setTimeout method tells the JS interpreter to run a function and then wait for a while before running it again. The annotation should read as follows: The setTimeout method tells the JS interpreter to wait a specified period of time before running a function. Other issues on this page that need to be fixed: The annotation that reads as follows should be removed entirely: This it our timing parameter (a variable called t). Drop it in here and use it again below. The first line of code reads: function lightning_one(t){ It should read as follows function lightning_one(){ The third line of code on the page currently reads as follows: setTimeout("lightning_one()", t); The third line of code on the page should read as follows: setTimeout("lightning_one()", 4000); Editors please note: this change impacts pages 194 - 197 for Magnets, Magnets Solution, and Do This. I have added errata for those pages.

Roman Blöth  Nov 27, 2011  Jun 28, 2013
Printed
Page 195
jQuery Magnets

A sentence should be added to the directions for the fridge magnets at the top of the jQuery page that says this: Hint: The interval for lightning_two should be 5000 milliseconds; The interval for lightning_three should be 7000 milliseconds. ------------------------------------ Four magnets also need to be changed. 1. The two magnets that reads as follows: (t){ Should read as follows: (){ 2. One of the magnets that reads as follows: t); Should read as follows: 5000); 3. One of the magnets that reads as follows: t); Should read as follows: 7000);

Ryan Benedetti
Ryan Benedetti
O'Reilly Author 
Jun 23, 2013  Jun 28, 2013
Printed
Page 196
jQuery Magnets Solution

Two magnets need to be changed. 1. On the third line of the code solution, the magnet that reads as follows: t); Should read as follows: 5000); 2. On the seventh line of the code solution, the magnet that reads as follows: t); Should read as follows: 7000);

Ryan Benedetti
Ryan Benedetti
O'Reilly Author 
Jun 23, 2013  Jun 28, 2013
Printed
Page 197
lightning functions

The lightning_one, etc. functions do not work as desired. After the first "flash", we use setTimeout to call function, for example, lightning_one() again. This time there is no parameter "t" passed to the function and the fade in/out methods are repeated from then on with no delay. This is one alternative: function lightning_one(t) { $("#lightning1").fadeIn(250).fadeOut(250); setTimeout("lightning_one(" + t + ")", t); } The solution in the "end" folder solves this by simply eliminating the "t" parameter and hardcoding the intervals in the three setTimeout calls. function lightning_one(){ $("#container #lightning1").fadeIn(250).fadeOut(250); setTimeout("lightning_one()",4000); }

Note from the Author or Editor:
The code for the "my_scripts.js" file on page 197 need to be fixed. Below is the full code (minus annotations) that should go in that space: $(document).ready(function(){ var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0; lightning_one(); lightning_two(); lightning_three(); $("#head").click(function(){ if (headclix < 9){ $("#head").animate({left:"-=367px"},500); headclix+=1; } else{ $("#head").animate({left:"0px"},500); headclix = 0; } }); $("#eyes").click(function(){ if (eyeclix < 9){ $("#eyes").animate({left:"-=367px"},500); eyeclix+=1; } else{ $("#eyes").animate({left:"0px"},500); eyeclix = 0; } }); $("#nose").click(function(){ if (noseclix < 9){ $("#nose").animate({left:"-=367px"},500); noseclix+=1; } else{ $("#nose").animate({left:"0px"},500); noseclix = 0; } });//end click $("#mouth").click(function(){ if (mouthclix < 9){ $("#mouth").animate({left:"-=367px"},500); mouthclix+=1; } else{ $("#mouth").animate({left:"0px"},500); mouthclix = 0; } }); });//end doc.onready function function lightning_one(){ $("#container #lightning1").fadeIn(250).fadeOut(250); setTimeout("lightning_one()",4000); }; function lightning_two(){ $("#container #lightning2").fadeIn("fast").fadeOut("fast"); setTimeout("lightning_two()",5000); }; function lightning_three(){ $("#container #lightning3").fadeIn("fast").fadeOut("fast"); setTimeout("lightning_three()",7000); };

None  May 18, 2012  Jun 28, 2013
Printed
Page 233
Middle of the page

The hit function attempts to assign a value to a object that has not been created yet: hand.cards[hand.cards.length] = c; We don't even create the hand object until a few pages later. This causes a undefined resource error. I removed this line and the script ran fine.

Note from the Author or Editor:
Confirmed. This line should only appear after the next section, after the 'hand' object is created. This code should reflect the code for 'step 2'. This line should be removed from both page 233 and 234

Charles B  Oct 10, 2011  Jun 28, 2013
PDF
Page 265
1st line of 2nd question

"like0" should be "like".

Anonymous  Dec 16, 2011  Jun 28, 2013
Printed
Page 265
Who Does What

Extraneous "." at the end of: fadeIn(250).delay(5000).fadeOut(250).;

Note from the Author or Editor:
Page number of error: 265 Location on the page: Who Does What Detailed description of error: Extraneous "." at the end of: fadeIn(250).delay(5000).fadeOut(250).; Should read as follows: fadeIn(250).delay(5000).fadeOut(250);

None  Jul 13, 2012  Jun 28, 2013
Printed
Page 333
Bottom of the Page

I couldn't figure out why the solution in the end folder worked and not mine, then it hit me. The book's clearInputs() function clears all of the input values, including the hidden ones as well. Here's the solution that I am up with: function clearInputs(){ // Clear each of the form inputs except the hidden ones $("#addRunner :input:not(:hidden)").each(function(i) { $(this).val(''); }); } It clears EVERYTHING except for the hidden field that is needed for the PHP script. I was wondering why I couldn't get my form to process more than once. Thanks. I am really learning a lot from this book.

Note from the Author or Editor:
The code submitted by the error reporter is valid and will work in this situation. This needs to replace the following code on pages 333 and 334: $("#addRunner :input").each(function(i) { It was rectified in the downloadable code for the final step in the chapter.

Charles B  Oct 17, 2011  Jun 28, 2013
PDF
Page 355
Answer to last question

"He released the the source" should be "He released the source"

Anonymous  Dec 26, 2011  Jun 28, 2013
PDF
Page 356
1st paragraph

"Update your my_scripts.js file with new function" presumably should be "Update your my_scripts.js file with a new function".

Anonymous  Dec 26, 2011  Jun 28, 2013
PDF
Page 359
3rd line in db_connection function

The service.php file in the end folder assumes that the database is named "race_info", whereas the code in the book assumes that it is named "hfjq_race_info".

Note from the Author or Editor:
This is confirmed. The downloadable code for this page should be updated to be the following file: thinkjquery.com/chapter09/ch09.zip (This needs to replace the file on http://www.headfirstlabs.com/books/hfjquery/ch09.zip)

Anonymous  Dec 26, 2011  Jun 27, 2013
PDF
Page 362
Geek Bits box

"We can use each method" presumably should be "We can use the each method".

Note from the Author or Editor:
Page number of error: 362 Location on the page: Geek Bits box Detailed description of error: "We can use each method" Should read as follows: "We can use the each method".

Anonymous  Dec 26, 2011  Jun 28, 2013
Printed
Page 367
jQuerycross

Clue 15 Across, "stoarge" should be "storage"

Note from the Author or Editor:
Page number of error: 367 Location on the page: jQuerycross, Clue 15 Across "stoarge" should read "storage"

None  Jul 23, 2012  Jun 28, 2013
Printed
Page 376
Test Drive, Second Link

Missing hash sign in the "effect" link. Should be http://jqueryui.com/demos/effect/#default

Note from the Author or Editor:
Page number of error: 376 Location on the page: Test Drive, URL column, second row Currently reads: http://jqueryui.com/demos/effect/default.html Should read: http://jqueryui.com/demos/effect/#default

None  Jul 24, 2012  Jun 28, 2013
Printed
Page 384
Ready Bake Code

Downloaded code for Chapter 10: the sightings_begin.html file in the begin folder has "sightings.php" listed as the form action. Should be "service.php".

Note from the Author or Editor:
Confirmed. The downloadable content (http://www.headfirstlabs.com/books/hfjquery/ch10.zip) should be updated from here: thinkjquery.com/chapter10/ch10.zip

None  Aug 02, 2012  Jun 27, 2013
Printed
Page 387
jQuery UI Magnets

The <input> fields should have a "value" attribute of the creature type. As printed the $_POST['creature_type'] for each button is equal to "on".

Note from the Author or Editor:
This is confirmed. The magnets on pages 387 and 388 should read as follows: <div id="type_select"> <input type="radio" id="radio1" name="creature_type" value="Chupacabras"/> <label for="radio1">Chupacabras</label> <input type="radio" id="radio2" name="creature_type" value="Jersey Devil"/> <label for="radio2">Jersey Devil</label> <input type="radio" id="radio3" name="creature_type" value="Loch Ness Monster"/> <label for="radio3">Loch Ness Monster</label> <input type="radio" id="radio4" name="creature_type" value="Sasquatch"/> <label for="radio4">Sasquatch</label> <input type="radio" id="radio5" name="creature_type" value="Yeti"/> <label for="radio5">Yeti</label> <input type="radio" id="radio6" name="creature_type" value="Other"/> <label for="radio6">Other</label> </div> The 'value' attribute is added to each "<input ..." line

None  Aug 03, 2012  Jun 28, 2013
Printed
Page 400
Ready Bake Code

The double slash "//" is not a legitimate comment indicator for css. Should be "/*comment*/".

Note from the Author or Editor:
This is confirmed. It does not affect the functionality of the page, but it is technically incorrect. The fist line in the code on page 400 should read: /* color slider styles */

None  Jul 26, 2012  Jun 28, 2013
Printed
Page 404
exersise solution 6th line

$("#swatch").$("#swatch").css should be : $("#swatch").css

Note from the Author or Editor:
On page 404, under the exercise solution code, line 6 reads as follows: $( "#swatch" ).$( "#swatch" ).css( "background-color", my_rgb ); The above is a typo. It should read as follows: $( "#swatch" ).css( "background-color", my_rgb );

Ferry Kreileman  Jun 18, 2013  Jun 28, 2013
Printed
Page 409
Bonus Exercise

sightings.sql code: shouldn't there be a "use hfjq_sightings" there before attempting to create the table?

Note from the Author or Editor:
This is confirmed. The download file (http://www.headfirstlabs.com/books/hfjquery/ch10.zip ) should be updated with the file available here: http://thinkjquery.com/chapter10/ch10.zip

None  Aug 02, 2012  Jun 27, 2013
Printed
Page 417
Code Magnets

There should not be a "dot" between "LatLng" and its arguments.

Note from the Author or Editor:
This is accurate. The line should read as follows: var latlng = new google.maps.LatLng______________; (page 417) and var latlng = new google.maps.LatLng(45.519098, -122.672138); (page 418) Remove the final . in both cases.

None  Aug 02, 2012  Jun 28, 2013
Printed
Page 420
service.zip download code

Same problem on line 74 of service.php: array key "weight" is unquoted.

Note from the Author or Editor:
This is confirmed. The download link (http://thinkjquery.com/chapter11/service.zip) has been updated. However, the downloadable content from headfirstlabs.com also needs to be updated.

None  Aug 06, 2012  Jun 27, 2013