###Overview
Create a task tracking application using Ruby on Rails for the back-end (server) to persist the tasks to the database, and JavaScript on the front-end (browser). The JavaScript should use jQuery and make AJAX requests to the server which will return JavaScript to update the page without a page reload.
The user (no user login or model is needed) should be able to add a task item, see all current task items, and mark task items as completed and also delete them.
This ToDo app handles 4 events:
- Page load
- New task submission
- Task completion
- Deleting a task
These events are handled through making ajax calls to the Rails back end. The first two, page load and new task submission, make json requests. We'll then write a function for generating and appending the task HTML from this json resonse and send it to the client in aplication.js
.
Since the last two events require DOM manipulation but don't return any data we make those request the javascript (.js) to do the DOM manipulation.
###Step by Step Instructions
- Review the migrations and Task model for this application. Note the default state of the 'completed' field.
- Run
bundle install
andrake db:migrate
from the bash prompt. - Create
TasksController
actions (index, create, complete and destroy). - Create the routes needed for the
TasksController
actions. - Review the basic DOM setup for the home page (/app/views/tasks/index.html.erb). No modification needed.
- Create some seed data for the tasks and seed the database.
- Run
rake db:seed
from the bash prompt to populate the database with seed data. - Make the
TasksController#index
action respond to json requests with json containing the array fromTask.all
. - When the DOM is ready make an ajax call to the
TasksController#index
action with adataType
setting set to json. - For now use
console.log
in the above ajax call's.done()
to see the result is an array of javascript objects. - Make a function that takes a 'task' JavaScript object as an argument
- Setup a jQuery DOM representation of the task object
- Set the htmlTask elements
data-id
attribute to the tasks id - Append htmlTask either to the
#todo-items
list or the#completed-items
list - Note
.click()
event handlers to thecomplete
anddelete
buttons that will later make ajax requests to the server - but don't fill it out yet - Rewrite the
.done()
method in step 10 so that it loops through the elements in the ajax response object and passes each to the new append task function - Make a javascript object
task
that will have aname
attribute - Set the name attribute to the value of the text in the
input
field - Make the click event send a json object to the
TasksController#create
action using AJAX - Use the method
console.log
on the result in the.done()
to see that it will return a JavaScript task object after the next steps. - In
TasksController#create
, instantiate a newTask
object, filling in thename
parameter and save it. - In
TasksController#create
, set uprespond_to
to a json request with json containing the saved task object. - Rewrite
.done()
method from step 20 to send the response object to the append task function. - Make the step 15
completeButton.click()
make an ajax call to theTasksController#complete
action and set thedataType
setting toscript
. - In the
TasksController#complete
action, find the task by id and set it'scompleted
property totrue
. - Make the
TasksController#complete
respond_to
respond to a javascript request. - Find the
complete.js.erb
file in the Task view that will hold the javascript response. - Use the HTML
data-id
attribute to find the task in the DOM. - Move the task to the
completed-items
list. - Make the step 15
deleteButton.click()
make an ajax call to theTasksController#destroy
action and set thedataType
setting toscript
- In the
TasksController#destroy
action, find the task by id and delete that task from the database . - In the
TasksController#destroy
action, makerespond_to
respond to a javascript request . - Create a
destroy.js.erb
file in theapp/views/tasks
that will hold the javascript response - In the
destroy.js.erb
file, use the HTMLdata-id
attribute to find the task in the DOM and remove it .