The errata list is a list of errors and their corrections that were found after the product was released.
The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.
| Version |
Location |
Description |
Submitted by |
Date submitted |
| PDF |
Page 20
4th paragraph "Discussion" |
closes() should be closest()
|
Theo |
Aug 13, 2013 |
| Printed |
Page 28
6th line from the end of the page, code sample |
Code sample reads:
jQuery('ul#a li')
.click(function(){alert('List Item Clicked')})
.parent()
.clone(true)
.find('li')
.appendTo('#b')
.end()
.end()
.remove();
Here is the mistake - all of the code after click() method should actually be INSIDE of the anonymous function. One can not CHAIN behaviours after the click() method, they should be declared inside.
Correct code:
jQuery('ul#a li')
.click(function(){
$(this)
.parent()
.clone(true)
.find('li')
.appendTo('ol#b')
.end()
.end()
.remove();
});
|
Andrey Esaulov |
Dec 11, 2009 |
| PDF |
Page 28
example in the discussion |
jQuery('ul#a li')
.click(function(){alert('List Item Clicked')})
.parent()
.clone(true)
.find('li')
.appendTo('#b')
.end()
.end()
.remove();
You must use 3 remove() to remove ul#a: the first for appendTo, the second for find, and the third for clone.
|
Abbasov Ramin |
Dec 18, 2009 |
| Printed |
Page 28
Example: Clone a list from ID A to ID B |
The example code adds the alerts and copies the list as expected but does not remove the initial list. You are left with two copies on the page. Source follows for verification.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="http-equiv="content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<ul id="a">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
<ul id="b"></ul>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
jQuery('ul#a li')
.click(function(){alert('List Item Clicked')})
.parent()
.clone(true)
.find('li')
.appendTo('#b')
.end()
.end()
.remove();
</script>
</body>
</html>
|
Michael Perkins |
Mar 29, 2010 |
| PDF |
Page 28
html and jquery code |
I tried this code in my browser (ubuntu 9.10, firefox 3.5.9, jquery 1.4.2) and original <ul> element wasn't removed. If I add third .end() function then original <ul> will be removed. If I remove .appendTo('#b') function then original <ul> will also be removed.
thanks beforehand and sorry for my english
from book (page 29):
7. .end() = Return to the previous selected set of elements, which was the cloned
<ul> element.
8. .end() = Return to the previous selected set of elements, which was the original
<ul> element we cloned.
9. .remove() = Remove the original <ul> element.
original jquery and html code (page 28):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<ul id="a">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
<ul id="b"></ul>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery('ul#a li')
.click(function(){alert('List Item Clicked')})
.parent()
.clone(true)
.find('li')
.appendTo('#b')
.end()
.end()
.remove();
</script>
</body>
</html>
|
Dmitri |
Apr 15, 2010 |
| PDF |
Page 28
sample code |
I've modified the code to visually demonstrate why an extra .end() is necessary. Also notice that when you click on an li element it will give you the id of its ul parent.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<ul id="a">
<li>Alpha</li>
<li>Beta</li>
<li>Epsilon</li>
<li>Theta</li>
</ul>
<ul id="b" style="background: #ccccff"></ul>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$('ul#a li') // set == ul with id of a and all its li elements
.click(function(){alert(document.getElementsByTagName('ul') [0].id)}) // setting event attribute property for li click event
.parent() // containing parent, the UL element
.clone(true) // Clone ul element including event attributes
.find('li') // filter for just li elements.
.appendTo('#b') // appends cloned li elements to b;
.css("border","3px dotted fuchsia") // borderize the cloned li elements
.end() // revert to previous set, cloned ul
.end() // revert to parent, '<ul>'
.end() // revert to original set
.remove(); // decommennt this line to remove the original UL from which we cloned
</script>
</body>
</html>
|
slevy1 |
May 29, 2010 |
| Printed |
Page 29
7. |
It seems that the point 7. return to the <li> element (instead of the <ul>)and then the point 8. return to the cloned <ul> (the one we have to remove).
If I comment one .end() command for testing, the ul#b li lines are removed, proving that the first step back goes to <li> elements.
I think the line should be :
7. .end() return = Return to the previous selected set of elements, wich were the cloned <li> elements.
But maybe I'm wrong...
Greetings from France.
Lionel
|
Lionel Gibaudan |
Apr 17, 2010 |
| Printed |
Page 29
first paragraph |
The paragraph says "If you were to run this code in a browser, it would clone the <li> elements on the page that have a click event attached to them, insert these newly cloned elements...."
According to the code, as well as the step by step analysis provided in the paragraph after the above, the correct first sentence of this paragraph should be something similar to:
"If you were to run this code in a browser, it would select the <li> elements within the ul element with an id of "a", then attach a click event to them, clone the elements and then insert these newly cloned elements...."
|
Anonymous |
Feb 13, 2011 |
| PDF |
Page 55
top |
after praising correct placement of javascript in the html page, all of the examples in chapter 1 (page 12), Chapter 1 continues to place the code at the bottom of the page.
Starting with Chapter 3, all of the examples have the javascript code at the top of the page, in the head, rather than at the bottom (page 55).
Best practices remain unclear.
|
Anonymous |
Feb 09, 2010 |
| PDF |
Page 65
jquery bold code at the top |
in my opinion "if" clause would be more correct instead of "while" clause in this code:
(function($){
$(document).ready(function(){
var arr = $.map($("LI"), function(item, index){
while (index < 3)
{
return $(item).html();
}
return null;
});
$(document.body).append("<span>The first three authors are: " +
arr.join(", ") + "</span>");
});
})(jQuery);
|
Dmitri |
Apr 17, 2010 |
| Printed, PDF |
Page 82
4.6 Filtering Out Duplicate Arra Entries with jQuery.unique |
If you build the syntax to 4.6 like:
<ul>
<li class="animals">eagle</li>
<li class="animals">ape</li>
<li class="animals">eagle</li>
</ul>
<ul>
<li class="horses">horse</li>
<li class="horses">horse</li>
<li class="horses">horse</li>
</ul>
<ul id="animals"></ul>
----
(function($) {
$(document).ready(function() {
var animals = $('li.animals').get();
var horses = $('li.horses').get();
var tmp = $.merge( animals, horses );
tmp = $.unique( tmp );
$('#animals').append( $(tmp).clone() );
});
})(jQuery);
the .unique()-method won't work. it only removes duplicates if they are the same actual element. if you have two elements that look like the same, they are actually considered to be two unique elements because they are not the same element.
but i found a solution:
http://stackoverflow.com/questions/2822962/jquery-remove-duplicate-elements
var animals = $('li.animals').get();
var horses = $('li.horses').get();
var tmp = $.merge( animals, horses );
$('#animals').append( $(tmp).clone() );
$('#animals li').each(function(){
if($(this).parent().length)
$("#animals li:contains('" + $(this).html() + "')").not(this).remove();
});
|
Anonymous |
May 12, 2011 |
| PDF |
Page 85
1st line |
The topic is about methods on Raw DOM Objects, so the following seems wrong:
'as there are some non-JavaScript methods that we can utilize for our advantage.'
should be:
'as there are some non-jQuery methods that we can utilize for our advantage.'
or maybe even better:
'as there are some core Javascript methods that we can utilize for our advantage.'
|
Paul Verschoor |
Dec 06, 2014 |
| PDF |
Page 86
3rd paragraph of 4.10 - Discussion |
Change
myPlugin: function() {
to
myPlugin: function(options) {
|
Zeevro |
Nov 29, 2009 |
| Printed |
Page 109
esc function of the code block |
The esc() function only replaces a single instance of the search values & < > which means it produces dangerous output.
Suggested replacement
function esc(text) {
return text
.replace(/&/g, '&')
.replace(/</g, "<")
.replace(/>/g, '>');
}
|
Peter Henderson |
May 28, 2010 |
| Printed |
Page 112
next to last example |
I believe the line that says
for( var item, i = -1; item = $item[++i]]) {
should be
for( var item, i = -1; item = $items[++i]];) {
(Two changes: $item becomes $items, and the addition of a semicolon.)
|
Joe Mabel |
Oct 29, 2010 |
| PDF |
Page 139
First HTML example block in Chapter 6.3 |
Delete
<h1>Finding the Offset of an Element</h1>
or move it to the bottom of the document as it interferes with the results.
|
Zeevro |
Dec 05, 2009 |
| Printed |
Page 140
below middle |
The text: 'the #fooDIV hasn't actually moved.....'
correct: #fooDIV has moved and both position and offset is now (10,10);
The offsetParent stays the same.
the text:'the #barDIV hasn.t moved either....'
correct: the offsetParent has changed, the position stays the same, the offset canges.
|
jens peter jorgensen |
Sep 22, 2010 |
| Printed |
Page 148
below middle |
Wonder if the leftposition in the second $tooltip.css is right when it adds $foo.width()/2 to fooOffset.left instead of 10. Cant see the reason why. Of course you can position it there but in the context it adds to confusion unless I'm wrong.
|
jens peter jorgensen |
Sep 23, 2010 |
| Printed |
Page 156
whole page |
It is essential for the slideUp example to work that the .box class is given a height and a width. It is given in the imported stylesheet, but ought to be pointed out.
on page 157 $('#revealUp') is rendered to var $box. Is this variable name smart in this connection or does it ad to confusion? I would call it $revealup in accordance with the practice in this book up to now.
|
jens peter jorgensen |
Sep 24, 2010 |
| Printed |
Page 163
top |
Fine piece of code.And it works. I thought there would be many other ways to do the same, but it is not that easy.
I think I would write like this supposing you had hidden the .box class in css (or else add hide() the proper places:
if($(".box")[0]){
i=0;
$("#animate").click(function(){
$($(".box")[i++]).fadeIn('slow',arguments.callee)
})
}
There are more ways of checking for the existance of .box elements and this is one of them. I am in no way an expert but it seems common reason not to create the array, and initialize the counter if no elements exist.
For a counter I wont use something like div. I you want to point out that it is divs you are counting then make it clear in the selector.
use : i,j or count
These are MY preferences and nothing else.
|
jens peter jorgensen |
Sep 25, 2010 |
| Printed |
Page 175
top |
The code will be slightly shorter and to me more readable if you use the .each() from page 53 instead. I have added on more property array. The properties also could be stored in an object and accessed like '0.color', '2.position' etc with this code.
var colors=['red','blue', 'green']
var position =['left','middle','right']
jQuery("button").each(function(num){
jQuery(this).bind('click',function(e){
jQuery('div.panel').hide()
jQuery('#panel'+num).show()
alert('you clickked the '+colors[num]+' button to the '+position[num])
the selector 'button' of course might need to be specified more precisely.
})
})
|
jens peter jorgensen |
Sep 26, 2010 |
| Printed |
Page 194
Bottom of page |
The example on page 194/195 doesn't work with jQuery 1.4.4; it does in 1.3.2
|
Anonymous |
Dec 21, 2010 |
| Printed |
Page 228
Code |
|
Anonymous |
Jul 20, 2010 |
| Printed |
Page 228
code |
I was able to cut-and-paste the code and get it to work. The only addition was to enclose the submit function in
$(document).ready(function() { ... }
to ensure that the DOM was loaded.
|
Mike Straw |
Mar 08, 2011 |
| Printed |
Page 232
bottom |
The switch sentence treats asks for !value and the test evaluates correct for no selection with both select-one and multiple.
In Javascript (typeof value='') correctly is string with value.length=0, which means that select-one without hesitation can be treated together with the text,textarea,password. This is true also in jQuery notation.
The multiple selection also surprisingly in Javascript evaluates typeof value to string and value.length=0 with no selection. But in jquery notation .val() correctly evaluates to the null object with no selection and the case 'select-mutiple' is treated as it should be.
|
jens peter jorgensen |
Oct 02, 2010 |
| Printed |
Page 232
bottom |
If you want to treat select-multiple together with the rest you can add :if(!value)value="" before the testing of value.length==0 in the text,textarea,password section
|
jens peter jorgensen |
Oct 02, 2010 |
| Printed |
Page 268
First para under "Discussion" |
"Attaching new methods and functions to the main jQuery object are a powerful feature..."
"are" should be "is", as its subject is the singular gerund "attaching". In addition "X are a Y" is jarring nonsense.
|
Anonymous |
Apr 17, 2015 |
| Printed |
Page 288
Disxussion 3rd paragraph |
In the end of 3rd paragraph it says 'we traverse the DOM and add class="tree_trigger_expanded" to the nearest trigger link"'. But actually in the file tree- jQuery code it adds class "trigger_expanded".This error also occur at Expand and collapse click function.
|
linxin |
Dec 26, 2013 |
| Printed |
Page 308
rotator_controls a click function |
I found double smicolon after a line of code which beneath the comment //Add class="current" and remove from all others.
|
linxin |
Dec 23, 2013 |
| Printed |
Page 419
code |
Coding the example exactly as described using
jquery.1.6.4
and pure.js version 2;
I have found that it does not handle the "authors" names properly as described in the text.
Using the Jason data sample as given, I get the name displayed as [object OBJECT].
The Jason data sample as given has the "authors" attribute as an array of "name" attributes.
I can get a name to display if I create a standalone "name" attribute.
If I use more than 1 then only the last one will display.
Do you know if this is now the case with your code or I am doing something wrong?
|
Robert Allard |
Oct 01, 2011 |