An extension of the jquery-ajax-crud lesson using the Library API hosted at https://wdi-library-api.herokuapp.com.
By the end of this, developers should be able to:
- C(reate) a resource,
- R(ead) a single resource,
- R(ead) all resources,
- U(pdate) a resource, and
- D(elete) a resource from the Library API.
- Display the results of CR(R)UD actions for the user.
- Fork and clone this repository.
- Change into the new directory (
cd
). - Create and checkout a new branch, named
response
. - Follow the directions given in the Instructions section of this file.
- When finished, push to your fork and submit a pull request.
You may wish to refer to FAQs related to forking, cloning, and pull requests.
All resources in the Library API follow this pattern:
Verb | URI Pattern | Controller#Action |
---|---|---|
GET | /resource |
resource#index |
GET | /resource/:id |
resource#show |
POST | /resource |
resource#create |
PATCH | /resource/:id |
resource#update |
DELETE | /resource/:id |
resource#destroy |
For each of the following resource sections, take a look at the linked
documentation and listed user stories. Then, in assets/scripts/
create a folder for each resource and the files events.js
, api.js
, and
ui.js
inside. Follow the steps in the Methodical Approach
section to fullfill all user stories and represent the mockups in the browser.
- As a user, I want to be able to see all Authors
- As a user, I want to be able to see a single Author
- As a user, I want to be able to create a new Author
- As a user, I want to be able to update an existing Author's data
- As a user, I want to be able to delete an existing Author
- As a user, I want to be able to see all Members
- As a user, I want to be able to see a single Member
- As a user, I want to be able to create a new Member
- As a user, I want to be able to update an existing Member's data
- As a user, I want to be able to delete an existing Member
- As a user, I want to be able to see all Librarians
- As a user, I want to be able to see a single Librarian
- As a user, I want to be able to create a new Librarian
- As a user, I want to be able to update an existing Librarian's data
- As a user, I want to be able to delete an existing Librarian
- Test API in browser (if possible)
- Test API with curl script
- Add feature to web application with AJAX
- Add a form to
index.html
. - Add a input fields and submit input to the form.
- Add an event listener to the form in the document ready event in
assets/scripts/app.js
. - Add a submit handler to pass as callback to event listener
assets/scripts/<resource>/events.js
. - Add a API call in
assets/scripts/<resource>/api.js
. - Add a success and failure handler in
assets/scripts/<resource>/ui.js
.
- Add a form to
To be able to fetch data for just one book, we'll need a way to tell the API which book we're looking for. One way to do this is to have the user input the ID of the book they're looking for. It turns out that needing to grab some user input and send it to the API is a very common problem in front-end web development.
To help solve that problem, we've included a function called getFormFields
in
the template that we use for our lessons, which is also the template you'll use
for your projects. Let's take a look at how to use that function.
First, your <input>
s will need to be wrapped in a <form>
, like this:
<form id="my-form">
<input name="book[id]" type="text">
<input name="book[name]" type="text">
<button type="submit">Get Book</button>
</form>
Then, in your Javascript, you'd do something like this:
const getFormFields = require('<path to lib>/get-form-fields.js')
$('#my-form').on('submit', function (event) {
event.preventDefault()
const form = event.target
const data = getFormFields(form)
})
Then, the data
variable would look like this:
{
book: {
id: "<whatever was entered in the ID input >",
name: "<whatever was entered in the name input>"
}
}
- All content is licensed under a CCBYNCSA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.