Skip to content

Commit 887356f

Browse files
committed
md cleanup
1 parent 8c37bc2 commit 887356f

22 files changed

+508
-268
lines changed

content/jquery-fundamentals/ajax/ajax-and-forms.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@ attribution: jQuery Fundamentals
66
---
77
## Ajax and Forms
88

9-
jQuery’s ajax capabilities can be especially useful when dealing with forms.
10-
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.
11-
That said, there are a two jQuery methods you should know that relate to form processing in jQuery: `$.fn.serialize` and `$.fn.serializeArray`.
9+
jQuery’s ajax capabilities can be especially useful when dealing with forms.
10+
The [jQuery Form Plugin](http://jquery.malsup.com/form/) is a well-tested tool
11+
for adding Ajax capabilities to forms, and you should generally use it for
12+
handling forms with Ajax rather than trying to roll your own solution for
13+
anything remotely complex. That said, there are a two jQuery methods you
14+
should know that relate to form processing in jQuery: `$.fn.serialize` and
15+
`$.fn.serializeArray`.
1216

1317
<div class="example" markdown="1">
1418
Turning form data into a query string
@@ -20,10 +24,10 @@ Turning form data into a query string
2024
Creating an array of objects containing form data
2125

2226
$('#myForm').serializeArray();
23-
27+
2428
// creates a structure like this:
2529
[
2630
{ name : 'field1', value : 123 },
2731
{ name : 'field2', value : 'hello world' }
2832
]
29-
</div>
33+
</div>

content/jquery-fundamentals/ajax/ajax-events.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@ attribution: jQuery Fundamentals
66
---
77
## Ajax Events
88

9-
Often, you’ll want to perform an operation whenever an Ajax requests starts or stops, such as showing or hiding a loading indicator.
10-
Rather than defining this behavior inside every Ajax request, you can bind Ajax events to elements just like you'd bind other events.
11-
For a complete list of Ajax events, visit [http://docs.jquery.com/Ajax_Events](http://docs.jquery.com/Ajax_Events "Ajax Events documentation on docs.jquery.com").
9+
Often, you’ll want to perform an operation whenever an Ajax requests starts or
10+
stops, such as showing or hiding a loading indicator. Rather than defining
11+
this behavior inside every Ajax request, you can bind Ajax events to elements
12+
just like you'd bind other events. For a complete list of Ajax events, visit
13+
[http://docs.jquery.com/Ajax_Events](http://docs.jquery.com/Ajax_Events "Ajax
14+
Events documentation on docs.jquery.com").
1215

1316
<div class="example" markdown="1">
1417
Setting up a loading indicator using Ajax Events
1518

1619
$('#loading_indicator')
1720
.ajaxStart(function() { $(this).show(); })
1821
.ajaxStop(function() { $(this).hide(); });
19-
</div>
22+
</div>

content/jquery-fundamentals/ajax/ajax-excercises.md

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,53 @@ attribution: jQuery Fundamentals
88

99
### Load External Content
1010

11-
Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/load.js`.
12-
Your task is to load the content of a blog item when a user clicks on the title of the item.
11+
Open the file `/exercises/index.html` in your browser. Use the file
12+
`/exercises/js/load.js`. Your task is to load the content of a blog item when
13+
a user clicks on the title of the item.
1314

14-
1. Create a target div after the headline for each blog post and store a reference to it on the headline element using `$.fn.data`.
15+
1. Create a target div after the headline for each blog post and store a
16+
reference to it on the headline element using `$.fn.data`.
1517

16-
2. Bind a click event to the headline that will use the $.fn.load method to load the appropriate content from /exercises/data/blog.html into the target div. Don't forget to prevent the default action of the click event.
18+
2. Bind a click event to the headline that will use the $.fn.load method to
19+
load the appropriate content from /exercises/data/blog.html into the target
20+
div. Don't forget to prevent the default action of the click event.
1721

18-
Note that each blog headline in index.html includes a link to the post.
19-
You'll need to leverage the href of that link to get the proper content from blog.html.
20-
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`:
22+
Note that each blog headline in index.html includes a link to the post. You'll
23+
need to leverage the href of that link to get the proper content from
24+
blog.html. Once you have the href, here's one way to process it into an ID
25+
that you can use as a selector in `$.fn.load`:
2126

2227
<div class="example" markdown="1">
2328
var href = 'blog.html#post1';
2429
var tempArray = href.split('#');
2530
var id = '#' + tempArray[1];
2631
</div>
2732

28-
Remember to make liberal use of `console.log` to make sure you're on the right path!
33+
Remember to make liberal use of `console.log` to make sure you're on the right
34+
path!
2935

3036
### Load Content Using JSON
3137

32-
Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/specials.js`.
33-
Your task is to show the user details about the special for a given day when the user selects a day from the select dropdown.
38+
Open the file `/exercises/index.html` in your browser. Use the file
39+
`/exercises/js/specials.js`. Your task is to show the user details about the
40+
special for a given day when the user selects a day from the select dropdown.
3441

35-
1. Append a target div after the form that's inside the #specials element; this will be where you put information about the special once you receive it.
42+
1. Append a target div after the form that's inside the #specials element;
43+
this will be where you put information about the special once you receive
44+
it.
3645

37-
2. Bind to the change event of the select element; when the user changes the selection, send an Ajax request to `/exercises/data/specials.json`.
46+
2. Bind to the change event of the select element; when the user changes the
47+
selection, send an Ajax request to `/exercises/data/specials.json`.
3848

39-
3. When the request returns a response, use the value the user selected in the select (hint: `$.fn.val`) to look up information about the special in the JSON response.
49+
3. When the request returns a response, use the value the user selected in the
50+
select (hint: `$.fn.val`) to look up information about the special in the
51+
JSON response.
4052

4153
4. Add some HTML about the special to the target div you created.
4254

43-
5. Finally, because the form is now Ajax-enabled, remove the submit button from the form.
55+
5. Finally, because the form is now Ajax-enabled, remove the submit button
56+
from the form.
4457

45-
Note that we're loading the JSON every time the user changes their selection. How could we change the code so we only make the request once, and then use a cached response when the user changes their choice in the select?
58+
Note that we're loading the JSON every time the user changes their selection.
59+
How could we change the code so we only make the request once, and then use a
60+
cached response when the user changes their choice in the select?

content/jquery-fundamentals/ajax/ajax-overview.md

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,26 @@ attribution: jQuery Fundamentals
66
---
77
## Overview
88

9-
The XMLHttpRequest method (XHR) allows browsers to communicate with the server without requiring a page reload.
10-
This method, also known as Ajax (Asynchronous JavaScript and XML), allows for web pages that provide rich, interactive experiences.
9+
The XMLHttpRequest method (XHR) allows browsers to communicate with the server
10+
without requiring a page reload. This method, also known as Ajax (Asynchronous
11+
JavaScript and XML), allows for web pages that provide rich, interactive
12+
experiences.
1113

12-
Ajax requests are triggered by JavaScript code; your code sends a request to a URL, and when it receives a response, a callback function can be triggered to handle the response.
13-
Because the request is asynchronous, the rest of your code continues to execute while the request is being processed, so it’s imperative that a callback be used to handle the response.
14+
Ajax requests are triggered by JavaScript code; your code sends a request to a
15+
URL, and when it receives a response, a callback function can be triggered to
16+
handle the response. Because the request is asynchronous, the rest of your
17+
code continues to execute while the request is being processed, so it’s
18+
imperative that a callback be used to handle the response.
1419

15-
jQuery provides Ajax support that abstracts away painful browser differences.
16-
It offers both a full-featured $.ajax() method, and simple convenience methods such as `$.get()`, `$.getScript()`, `$.getJSON()`, `$.post()`, and `$().load()`.
20+
jQuery provides Ajax support that abstracts away painful browser differences.
21+
It offers both a full-featured $.ajax() method, and simple convenience methods
22+
such as `$.get()`, `$.getScript()`, `$.getJSON()`, `$.post()`, and
23+
`$().load()`.
1724

18-
Most jQuery applications don’t in fact use XML, despite the name “Ajax”; instead, they transport data as plain HTML or JSON (JavaScript Object Notation).
25+
Most jQuery applications don’t in fact use XML, despite the name “Ajax”;
26+
instead, they transport data as plain HTML or JSON (JavaScript Object
27+
Notation).
1928

20-
In general, Ajax does not work across domains.
21-
Exceptions are services that provide JSONP (JSON with Padding) support, which allow limited cross-domain functionality.
29+
In general, Ajax does not work across domains. Exceptions are services that
30+
provide JSONP (JSON with Padding) support, which allow limited cross-domain
31+
functionality.

0 commit comments

Comments
 (0)