update examples to core styls in AJAX section

Author: bobholt

page/ajax/ajax-and-forms.md

@@ -12,25 +12,35 @@ The `serialize` method serializes a form's data into a query string. For the ele
 
 ```
 // Turning form data into a query string
-$('#myForm').serialize(); // creates a query string like this: field_1=something&field2=somethingElse
+$("#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.
 
 ```
 // Creating an array of objects containing form data
-$('#myForm').serializeArray();
+$("#myForm").serializeArray();
 
 // creates a structure like this:
 // [
-//   { name : 'field_1', value : 'something' },
-//   { name : 'field_2', value : 'somethingElse' }
+//   {
+//
+//     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. 
+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.
 
@@ -39,13 +49,18 @@ With that being said, let's jump on in to some examples! First, we'll see how ea
 ```
 // Using validation to check for the presence of an input
 $("#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 {
+
+	} else {
+
 		// run $.ajax here
+
 	}
+
 });
 ```
 
@@ -54,20 +69,23 @@ Let's see how easy it is to check for invalid characters in a username:
 ```
 // Validate a phone number field
 $("#form").submit(function( e ) {
-	var inputtedPhoneNumber = $("#phone").val()
-		, phoneNumberRegex = ^\d*$/; // match only numbers
-	
+
+	var inputtedPhoneNumber = $("#phone").val();
+  var 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 {
+
+	} else {
+
 		// run $.ajax here
-	}
-})
-```
 
+	}
 
+});
+```
 
 ### Prefiltering
 A prefilter is a way to modify the ajax options before each request is sent (hence, the name `prefilter`).
@@ -77,10 +95,15 @@ For example, say we would like to modify all crossDomain requests through a prox
 ```
 // Using a proxy with a prefilter
 $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
+
 	if ( options.crossDomain ) {
+
 		options.url = "http://mydomain.net/proxy/" + encodeURIComponent(options.url );
+
 		options.crossDomain = false;
+
 	}
+
 });
 ```
 
@@ -89,6 +112,8 @@ You can pass in an optional argument before the callback function that specifies
 ```
 // Using the optional dataTypes argument">
 $.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"
-})
+
+});
 ```

page/ajax/ajax-events.md

@@ -10,7 +10,14 @@ just like you'd bind other events.  For a complete list of Ajax events, visit
 
 ```
 // Setting up a loading indicator using Ajax Events
-$('#loading_indicator')
-  .ajaxStart(function() { $(this).show(); })
-  .ajaxStop(function() { $(this).hide(); });
+$("#loading_indicator").ajaxStart(function() {
+
+    $(this).show();
+
+  }).ajaxStop(function() {
+
+    $(this).hide();
+
+});
+
 ```

page/ajax/ajax-excercises.md

@@ -21,9 +21,9 @@ blog.html.  Once you have the href, here's one way to process it into an ID
 that you can use as a selector in `$.fn.load`:
 
 ```
-  var href = 'blog.html#post1';
-  var tempArray = href.split('#');
-  var id = '#' + tempArray[1];
+  var href = "blog.html#post1";
+  var tempArray = href.split("#");
+  var id = "#" + tempArray[1];
 ```
 
 Remember to make liberal use of `console.log` to make sure you're on the right

page/ajax/jquery-ajax-methods.md

@@ -24,40 +24,52 @@ documentation of the configuration options, visit
 documentation on api.jquery.com").
 
 ```
-// Using the core `$.ajax` method
+// Using the core $.ajax method
 $.ajax({
-    // the URL for the request
-    url : 'post.php',
-
-    // the data to send
-    // (will be converted to a query string)
-    data : { id : 123 },
-
-    // whether this is a POST or GET request
-    type : 'GET',
-
-    // the type of data we expect back
-    dataType : 'json',
-
-    // code to run if the request succeeds;
-    // the response is passed to the function
-    success : function(json) {
-        $('<h1/>').text(json.title).appendTo('body');
-        $('<div class="content"/>')
-            .html(json.html).appendTo('body');
-    },
-
-    // code to run if the request fails;
-    // the raw request and status codes are
-    // passed to the function
-    error : function(xhr, status) {
-        alert('Sorry, there was a problem!');
-    },
-
-    // code to run regardless of success or failure
-    complete : function(xhr, status) {
-        alert('The request is complete!');
-    }
+
+  // the URL for the request
+  url : "post.php",
+
+  // the data to send
+  // (will be converted to a query string)
+  data : {
+
+    id : 123
+
+  },
+
+  // whether this is a POST or GET request
+  type : "GET",
+
+  // the type of data we expect back
+  dataType : "json",
+
+  // code to run if the request succeeds;
+  // the response is passed to the function
+  success : function( json ) {
+
+      $("<h1/>").text( json.title ).appendTo("body");
+
+      $("<div class=\"content\"/>").html( json.html ).appendTo("body");
+
+  },
+
+  // code to run if the request fails;
+  // the raw request and status codes are
+  // passed to the function
+  error : function( xhr, status ) {
+
+      alert("Sorry, there was a problem!");
+
+  },
+
+  // code to run regardless of success or failure
+  complete : function( xhr, status ) {
+
+    alert("The request is complete!");
+
+  }
+
 });
 ```
 
@@ -218,20 +230,32 @@ type in their name.  </div>
 ```
 // Using jQuery's Ajax convenience methods
 // get plain text or html
-$.get('/users.php', { userId : 1234 }, function(resp) {
-  console.log(resp);
+$.get( "/users.php", {
+
+    userId : 1234
+
+  }, function( resp ) {
+
+  console.log( resp );
+
 });
 
 // add a script to the page, then run a function defined in it
-$.getScript('/static/js/myScript.js', function() {
+$.getScript( "/static/js/myScript.js", function() {
+
   functionFromMyScript();
+
 });
 
 // get JSON-formatted data from the server
-$.getJSON('/details.php', function(resp) {
-  $.each(resp, function(k, v) {
-    console.log(k + ' : ' + v);
+$.getJSON( "/details.php", function( resp ) {
+
+  $.each( resp, function( k, v ) {
+
+    console.log( k + " : " + v );
+
   });
+
 });
 ```
 
@@ -244,13 +268,15 @@ providing a URL to the method, you can optionally provide a selector; jQuery
 will fetch only the matching content from the returned HTML.
 
 ```
-// Using `$.fn.load` to populate an element
-$('#newContent').load('/foo.html');
+// Using $.fn.load to populate an element
+$("#newContent").load("/foo.html");
 ```
 
 ```
-// Using `$.fn.load` to populate an element based on a selector
-$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
-  alert('Content updated!');
+// Using $.fn.load to populate an element based on a selector
+$("#newContent").load( "/foo.html #myDiv h1:first:", function( html ) {
+
+  alert("Content updated!"");
+
 });
 ```

page/ajax/key-concepts.md

@@ -75,17 +75,27 @@ available.  Responses can only be handled using a callback.  So, for example,
 the following code will not work:
 
 ```
-    var response;
-    $.get('foo.php', function(r) { response = r; });
-    console.log(response); // undefined!
+var response;
+
+$.get( "foo.php", function( r ) {
+
+  response = r;
+
+});
+
+console.log( response ); // undefined!
 ```
 
 Instead, we need to pass a callback function to our request; this callback will
 run when the request succeeds, at which point we can access the data that it
 returned, if any.
 
 ```
-    $.get('foo.php', function(response) { console.log(response); });
+$.get( "foo.php", function( response ) {
+
+  console.log( response );
+
+});
 ```
 
 ### Same-Origin Policy and JSONP

page/ajax/working-with-jsonp.md

@@ -12,25 +12,31 @@ following example to fetch news about cats.
 ```
 // Using YQL and JSONP
 $.ajax({
-  url : 'http://query.yahooapis.com/v1/public/yql',
+
+  url : "http://query.yahooapis.com/v1/public/yql",
 
   // the name of the callback parameter,
   // as specified by the YQL service
-  jsonp : 'callback',
+  jsonp : "callback",
 
   // tell jQuery we're expecting JSONP
-  dataType : 'jsonp',
+  dataType : "jsonp",
 
   // tell YQL what we want and that we want JSON
   data : {
-    q : 'select title,abstract,url from search.news where query="cat"',
-    format : 'json'
+
+    q : "select title,abstract,url from search.news where query=\"cat\"",
+    format : "json"
+
   },
 
   // work with the response
-  success : function(response) {
-    console.log(response);
+  success : function( response ) {
+
+    console.log( response );
+
   }
+
 });
 ```