diff --git a/README.md b/README.md
index 1d08e424..490c81e9 100755
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ This site consists of content maintained in [Markdown](http://daringfireball.net
The entire site is managed via [this Git repository](https://github.com/jquery/learn.jquery.com). If you'd like to contribute new articles, make edits to existing content, or work on the site itself, the first thing you'll need is a [fork](http://help.github.com/fork-a-repo/). When you have changes you'd like to have reviewed and integrated into the site, submit a [pull request](http://help.github.com/send-pull-requests/).
-If you aren't already familiar with Git, you'll still need a fork and a GitHub account, but you can can edit files directly via [GitHub's in-browser editor](https://github.com/blog/905-edit-like-an-ace), but you won't be able to create new content. We encourage you to [learn how to use Git andGitHub](http://help.github.com/), it'll probably pretty useful no matter what.
+If you aren't already familiar with Git, you'll still need a fork and a GitHub account, but you can can edit files directly via [GitHub's in-browser editor](https://github.com/blog/905-edit-like-an-ace), but you won't be able to create new content. We encourage you to [learn how to use Git and GitHub](http://help.github.com/), it'll probably pretty useful no matter what.
## How Do I Get This Running Locally?
diff --git a/Rules b/Rules
index 2d7c67cb..3075340e 100644
--- a/Rules
+++ b/Rules
@@ -29,7 +29,7 @@ class Nanoc3::Filter
languages = LANGUAGES.keys.join("|")
until @string.empty?
- match = scan_until /(\+(\S.*?\S?)\+|<(#{languages})(?: filename=["']([^"']*)["'])?(?: caption=["']([^"']*)["'])?>|\z)/m
+ match = scan_until /(\+(\S.*?\S?)\+|<(#{languages})(?: filename=["']([^"']*)["'])?(?: caption=["]([^"]*)["])?>|\z)/m
@pending << match.pre_match
diff --git a/content/ajax/ajax-and-forms.md b/content/ajax/ajax-and-forms.md
index 14e761a8..dc78e052 100644
--- a/content/ajax/ajax-and-forms.md
+++ b/content/ajax/ajax-and-forms.md
@@ -3,25 +3,89 @@ chapter : ajax
section : 4
title : Ajax and Forms
attribution: jQuery Fundamentals
+
---
-jQuery’s ajax capabilities can be especially useful when dealing with forms.
-The [jQuery Form Plugin](http://jquery.malsup.com/form/) is a well-tested tool
-for adding Ajax capabilities to forms, and you should generally use it for
-handling forms with Ajax rather than trying to roll your own solution for
-anything remotely complex. That said, there are a two jQuery methods you
-should know that relate to form processing in jQuery: `$.fn.serialize` and
-`$.fn.serializeArray`.
+
+jQuery’s ajax capabilities can be especially useful when dealing with forms. There are several advantages, which can range from serialization, to simple client-side validation (e.g. "Sorry, that username is taken"), to [prefilters](http://api.jquery.com/extending-ajax/#Prefilters) (explained below), and even more!
+
+### Serialization
+Serializing form inputs in jQuery is extremely easy. Two methods come supported natively - `$.fn.serialize` and `$.fn.serializeArray`. While the names are fairly self-explanatory, there are many advantages to using them.
+
+The `serialize` method serializes a form's data into a query string. For the element's value to be serialized, it **must** have a `name` attribute. Please noted that values from inputs with a type of `checkbox` or `radio` are included only if they are checked.
+
-$('#myForm').serialize();
+$('#myForm').serialize(); // creates a query string like this: field_1=something&field2=somethingElse
+While plain old serialization is great, sometimes your application would work better if you sent over an array of objects, instead of just the query string. For that, jQuery has the `serializeArray` method. It's very similar to the `serialize` method listed above, except it produces an array of objects, instead of a string.
+
$('#myForm').serializeArray();
// creates a structure like this:
-[
- { name : 'field1', value : 123 },
- { name : 'field2', value : 'hello world' }
-]
+// [
+// { name : 'field_1', value : 'something' },
+// { name : 'field_2', value : 'somethingElse' }
+// ]
+
+
+### Client-side validation
+Client-side validation is, much like many other things, extremely easy using jQuery. While there are several cases developers can test for, some of the most common ones are: presence of a required input, valid usernames/emails/phone numbers/etc..., or checking an "I agree..." box.
+
+Please note that it is advisable that you also perform server-side validation for your inputs. However, it typically makes for a better user experience to be able to validate some things without submitting the form.
+
+With that being said, let's jump on in to some examples! First, we'll see how easy it is to check if a required field doesn't have anything in it. If it doesn't, then we'll `return false`, and prevent the form from processing.
+
+
+$("#form").submit(function( e ) {
+ if ( $(".required").val().length === 0 ) { // if .required's value's length is zero
+ // usually show some kind of error message here
+ return false; // this prevents the form from submitting
+ }
+ else {
+ // run $.ajax here
+ }
+});
+
+Let's see how easy it is to check for invalid characters in a username:
+
+
+$("#form").submit(function( e ) {
+ var inputtedPhoneNumber = $("#phone").val()
+ , phoneNumberRegex = ^\d*$/; // match only numbers
+
+ if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) { // if the phone number doesn't match the regex
+ // usually show some kind of error message ere
+ return false; // prevent the form from submitting
+ }
+ else {
+ // run $.ajax here
+ }
+})
+
+
+
+
+### Prefiltering
+A prefilter is a way to modify the ajax options before each request is sent (hence, the name `prefilter`).
+
+For example, say we would like to modify all crossDomain requests through a proxy. To do so with a prefilter is quite simple:
+
+
+$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
+ if ( options.crossDomain ) {
+ options.url = "http://mydomain.net/proxy/" + encodeURIComponent(options.url );
+ options.crossDomain = false;
+ }
+});
+
+
+You can pass in an optional argument before the callback function that specifies which `dataTypes` you'd like the prefilter to be applied to. For example, if we want our prefilter to only apply to `JSON` and `script` requests, we'd do:
+
+
+$.ajaxPrefilter( "json script", function( options, originalOptions, jqXHR ) {
+ // do all of the prefiltering here, but only for requests that indicate a dataType of "JSON" or "script"
+})
+
\ No newline at end of file
diff --git a/content/getting-started/downloading-jquery.md b/content/getting-started/downloading-jquery.md
index 1e5a4aa6..9089875c 100644
--- a/content/getting-started/downloading-jquery.md
+++ b/content/getting-started/downloading-jquery.md
@@ -88,7 +88,7 @@ The minified versions, while having a larger file size than the packed versions
## jQuery Git - An Instant WIP Build For Testing
This work-in-progress build (known as jQuery Git) is generated once a minute
-from the [ jQuery Git repository ]( http://github.com/jquery/jquery ). It is
+from the [jQuery Git repository]( http://github.com/jquery/jquery ). It is
provided as a convenience for anyone that wants to help test changes in the
next version of jQuery.
@@ -135,7 +135,7 @@ jQuery currently requires the following components to be installed:
** ant: Available on any platform with JDK and ANT installed
* java: A copy of Java, version 1.6.0 or later (required to build the minified version of jQuery).
-** Build Process **
+**Build Process**
You will now need to use the build system that you chose previously - either make or ant.
diff --git a/content/javascript-101/arrays.md b/content/javascript-101/arrays.md
index 67f9e791..435d3cd7 100644
--- a/content/javascript-101/arrays.md
+++ b/content/javascript-101/arrays.md
@@ -24,16 +24,16 @@ console.log(myArray.length); // logs 2
var myArray = [ 'hello', 'world' ];
-myArray[1] = 'changed';
+myArray[1] = 'changed'; // myArray is now now ['hello', 'changed']
var myArray = [ 'hello', 'world' ];
-myArray.push('new');
+myArray.push('new'); // myArray is now ['hello', 'world', 'new']
var myArray = [ 'h', 'e', 'l', 'l', 'o' ];
-var myString = myArray.join(''); // 'hello'
-var mySplit = myString.split(''); // [ 'h', 'e', 'l', 'l', 'o' ]
+var myString = myArray.join(''); // myString = 'hello'
+var mySplit = myString.split(''); // mySPlit = [ 'h', 'e', 'l', 'l', 'o' ]
diff --git a/content/javascript-101/functions.md b/content/javascript-101/functions.md
index 6c553d83..14fad281 100644
--- a/content/javascript-101/functions.md
+++ b/content/javascript-101/functions.md
@@ -25,32 +25,32 @@ used in others' JavaScript code.
## Using Functions
- var greet = function(person, greeting) {
- var text = greeting + ', ' + person;
- console.log(text);
- };
+var greet = function(person, greeting) {
+ var text = greeting + ', ' + person;
+ console.log(text);
+};
- greet('Rebecca', 'Hello');
+greet('Rebecca', 'Hello');
- var greet = function(person, greeting) {
- var text = greeting + ', ' + person;
- return text;
- };
+var greet = function(person, greeting) {
+ var text = greeting + ', ' + person;
+ return text;
+};
- console.log(greet('Rebecca','hello'));
+console.log(greet('Rebecca','hello'));
- var greet = function(person, greeting) {
- var text = greeting + ', ' + person;
- return function() { console.log(text); };
- };
+var greet = function(person, greeting) {
+ var text = greeting + ', ' + person;
+ return function() { console.log(text); };
+};
- var greeting = greet('Rebecca', 'Hello');
- greeting();
+var greeting = greet('Rebecca', 'Hello');
+greeting();
## Immediately-Invoked Function Expression
@@ -62,11 +62,11 @@ polluting the global namespace with your code — no variables declared inside o
the function are visible outside of it.
- (function(){
- var foo = 'Hello world';
- })();
+(function(){
+ var foo = 'Hello world';
+})();
- console.log(foo); // undefined!
+console.log(foo); // undefined!
## Functions as Arguments
@@ -76,16 +76,15 @@ to variables or passed to other functions as arguments. Passing functions as
arguments is an extremely common idiom in jQuery.
- var myFn = function(fn) {
- var result = fn();
- console.log(result);
- };
+var myFn = function(fn) {
+ var result = fn();
+ console.log(result);
+};
- myFn(function() { return 'hello world'; }); // logs 'hello world'
+myFn(function() { return 'hello world'; }); // logs 'hello world'
-
-Passing a named function as an argument
+
var myFn = function(fn) {
var result = fn();
@@ -97,4 +96,4 @@ Passing a named function as an argument
};
myFn(myOtherFn); // logs 'hello world'
-
+
diff --git a/content/javascript-101/loops.md b/content/javascript-101/loops.md
index 6e0540c0..f38049af 100644
--- a/content/javascript-101/loops.md
+++ b/content/javascript-101/loops.md
@@ -128,6 +128,7 @@ the loop's body with the break statement.
You may also want to continue the loop without executing more of the loop's
body. This is done using the continue statement.
+
for (var i = 0; i < 10; i++) {
if (something) {
diff --git a/content/javascript-101/objects.md b/content/javascript-101/objects.md
index a33dee13..9e54ab6c 100644
--- a/content/javascript-101/objects.md
+++ b/content/javascript-101/objects.md
@@ -12,23 +12,26 @@ called a method of the object. Otherwise, they are called properties.
As it turns out, nearly everything in JavaScript is an object -- arrays,
functions, numbers, even strings -- and they all have properties and methods.
-
+
+
var myObject = {
sayHello : function() {
console.log('hello');
},
-
myName : 'Rebecca'
};
-
+
myObject.sayHello(); // logs 'hello'
+
console.log(myObject.myName); // logs 'Rebecca'
+
When creating object literals, you should note that the key portion of each
key-value pair can be written as any valid JavaScript identifier, a string
(wrapped in quotes) or a number:
-
+
+
var myObject = {
validIdentifier : 123,
'some string' : 456,
diff --git a/content/javascript-101/scope.md b/content/javascript-101/scope.md
index b458f041..d253956d 100644
--- a/content/javascript-101/scope.md
+++ b/content/javascript-101/scope.md
@@ -53,7 +53,7 @@ sayHello(); // logs 'hello'
console.log(foo); // logs 'world'
-
+
var myFunction = function() {
var foo = 'hello';
diff --git a/content/javascript-101/testing-type.md b/content/javascript-101/testing-type.md
index 7a8cd43a..b424a7ab 100644
--- a/content/javascript-101/testing-type.md
+++ b/content/javascript-101/testing-type.md
@@ -17,7 +17,7 @@ var myFunction = function() {
};
var myObject = {
-foo : 'bar'
+ foo : 'bar'
};
var myArray = [ 'a', 'b', 'c' ];
diff --git a/content/jquery-basics/css-styling-dimensions.md b/content/jquery-basics/css-styling-dimensions.md
index b9420e1d..562f5c38 100644
--- a/content/jquery-basics/css-styling-dimensions.md
+++ b/content/jquery-basics/css-styling-dimensions.md
@@ -31,6 +31,8 @@ contains multiple properties. This is a common way to pass multiple arguments
to a function, and many jQuery setter methods accept objects to set mulitple
values at once.
+**Note:** while we do not recommend using `$.fn.css` as a setter in production-ready code (see below), when passing in an object to set CSS, CSS properties will be camelCased, instead of using a hypen.
+
### Using CSS Classes for Styling
As a getter, the `$.fn.css` method is valuable; however, it should generally be
@@ -39,7 +41,7 @@ presentational information in your JavaScript. Instead, write CSS rules for
classes that describe the various visual states, and then simply change the
class on the element you want to affect.
-
+
var $h1 = $('h1');
$h1.addClass('big');
@@ -47,7 +49,7 @@ $h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('big')) { ... }
-
+
Classes can also be useful for storing state information about an element, such as indicating that an element is selected.
diff --git a/layouts/footer.html b/layouts/footer.html
index c081b45a..cec80809 100644
--- a/layouts/footer.html
+++ b/layouts/footer.html
@@ -9,12 +9,12 @@
Quick Access
CDN
- //ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
+ //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js