ga-wdi-boston / jquery-ajax-get-element

jQuery AJAX GET Element

Prerequisites

• http-study
• json-study
• Ajax Get Collection

Objectives

Make HTTP requests using curl, the browser address bar, and AJAX for:

• A specific resource.

Use response data in future requests

Preparation

1. Fork and clone this repository.
2. Create and checkout a new branch (training).
3. Install dependencies with npm install.

You can access the same web server that we set up during jquery-ajax-get-collection. Just leave the server running at the same port.

If you need to set up the web server from scatch:

We'll make requests of and receive responses from an HTTP server we'll set up together:

1. Open a new terminal (window or tab).
2. Change into ~/wdi/tmp.
3. Fork and clone library-api-guide and follow installation instructions listed there.
4. Once installed, checkout a jquery-ajax branch within library-api.

We're now ready to make requests.

GET /books/:id

Retrieve a book from the API

Demo: Browser Single Book

Entering http://localhost:4741/books/1 into the chrome address bar.

Demo: Curl Single Book

We'll use curl to retrieve the one book at a time.

Code Along: Curl Single Book

Let's write that curl command into a script.

Lab: AJAX Single Book

Again, take a stepped approach:

1. Add a text input for a book id to the form in index.html.
2. Retrieve the value of the id, if any, in the submit handler.
3. Branch on that value in the submit handler.
4. Add a single book success and fail handler to assets/scripts/ui.js.
5. Add a single book retrieval method to assets/scripts/library-api.js.
6. Invoke the single book retrieval method from the submit handler passing the success and fail callbacks.

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].

jquery-ajax-get-element's Issues

Could developers benefit from not using getFormFields at first?

I think getFormFields is really nice to have as part of browser-template because it is flexible with the types of inputs and resource name which is great for Project 1.

Since jquery-ajax-get-element and jquery-ajax-delete only require the developers to get 1 value from DOM, I wonder if it would be valuable to use $("#formID").serialize(). I think getFormFields would appear less magical and their understanding of what it does might end up stronger if they see it after using just jQuery.

We could introduce the getFormFields function during jquery-ajax-patch or jquery-ajax-post so they will still be prepared to benefit from it during Project 1.

Potentially even break it down like:
jquery-ajax-get-element use .val()
jquery-ajax-delete use .serialize()
jquery-ajax-patch use getFormFields()
jquery-ajax-post they can experiment with any of the 3 during lab.

It might seem like it is adding to what they need to learn but I think it might actually just be creating steps to the same point.

Thoughts?

Resources
.serialize()
https://api.jquery.com/serialize/
val()
https://api.jquery.com/val/

Create functions with `function` keyword and fix-up scripts?

See ga-wdi-boston/api-token-auth#26 and ga-wdi-boston/api-token-auth#24

Second steps in preparation redundant

We'll make requests of and receive responses from an HTTP server we'll set up together:

Open a new terminal (window or tab).
Change into ~/wdi/tmp.
Fork and clone library-api-guide and follow installation instructions listed there.
Once installed, checkout a jquery-ajax branch within library-api.

In 015 we had already set this server up during the library-api-guide "study" and we already had them still running their server as this talk was delivered. This should be clarified in the README.

name in package.json

"name": "ga-wdi-boston.browser-template",

Rename to jquery-ajax-get-element

via @jrhorn424 and @gaand

Remove all references to localhost:3000

Should be localhost:4741

Rename `scripts/books/book-show.sh` to `scripts/books/show.sh`

Needs to be repo manned

via @payne-chris-r 01/11/17 planning meeting

ga-wdi-boston/jquery-ajax-get-element

1 Unit estimate

Update from talk-template and browser-template

require getFormFields

This will get rid of a linter error and prepare us for: ga-wdi-boston/browser-template-ARCHIVED#49

Error on solution

In assets/scripts/books/events.js:

- let book = getFormFields($('#book-search'));
+ let book = getFormFields(event.target);

Change README text for file locations

In the last section of the README:

Add a single book success and fail handler to assets/scripts/ui.js.
Add a single book retrieval method to assets/scripts/library-api.js.

Should be:

Add a single book success and fail handler to assets/scripts/books/ui.js.
Add a single book retrieval method to assets/scripts/books/api.js.