dash of ajax
DESCRIPTION
Adding Ajax to our Shopping cartTRANSCRIPT
![Page 1: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/1.jpg)
Add a Dash of Ajax
Jason Noblehttp://jasonnoble.org
![Page 2: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/2.jpg)
Partial Templates
• Methods for views• Move a portion of your view to a separate file• Invoke a given partial from multiple locations– Another view– Controller
![Page 3: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/3.jpg)
app/views/carts/show.html.erb
![Page 4: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/4.jpg)
Rails render method
• takes a collection as an argument• renders a partial view for each item• Partials filenames start with with _– _line_item.html.erb
• Inside the partial we will have a variable available the same name as the partial– _line_item partial has variable line_item
![Page 5: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/5.jpg)
app/views/line_items/_line_item.html.erb
![Page 6: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/6.jpg)
app/views/carts/_cart.html.erb
![Page 7: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/7.jpg)
app/views/layouts/application.html.erb
![Page 8: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/8.jpg)
app/controllers/store_controller.rb
![Page 9: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/9.jpg)
public/stylesheets/depot.css
![Page 10: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/10.jpg)
app/controllers/line_items_controller.rb
![Page 11: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/11.jpg)
app/views/store/index.html.erb
• Modify the Add to Cart to use Ajax
![Page 12: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/12.jpg)
app/controllers/line_items_controller.rb
• Modify create to respond to JavaScript
![Page 13: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/13.jpg)
app/views/line_items/create.js.rjs
• Render JavaScript
• page is a JavaScript generator• Replaces HTML content of the id cart with the
rendered HTML
• Now clicking Add to Cart doesn’t refresh the page, just the cart div
![Page 14: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/14.jpg)
Highlight Changes
• Product owner wants a visual cue that the cart has been updated
• We’ll use the script.aculo.us’ provided yellow fade technique
• See other effects at http://madrobby.github.com/scriptaculous/demos/
![Page 15: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/15.jpg)
app/controllers/line_items_controller.rb
• We need to know what item is being updated
![Page 16: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/16.jpg)
app/views/line_items/_line_item.html.erb
![Page 17: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/17.jpg)
app/views/line_items/create.js.rjs
• Current Item will be tagged with id=“current_item”
• Add Visual Effect via JavaScript
![Page 18: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/18.jpg)
Hide Empty Carts
• Customer would like to hide the cart if it is empty
• We’ll do this first via not rendering the HTML if the cart is empty
• Then we’ll make it smoother by adding another JavaScript effect
![Page 19: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/19.jpg)
app/views/carts/_cart.html.erb
![Page 20: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/20.jpg)
app/views/line_items/create.js.rjs
![Page 21: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/21.jpg)
app/models/cart.rb
app/views/layout/application.html.erb
![Page 22: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/22.jpg)
app/helpers/application_helper.rb
![Page 23: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/23.jpg)
app/views/layouts/application.html.erb
• Use hidden_div_if helper
![Page 24: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/24.jpg)
app/controllers/carts_controller.rb
• Don’t display “Your cart is empty” flash
![Page 25: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/25.jpg)
Run tests
• rake test– 1 failure, 9 errors
• You can see errors as well– http://localhost:3000/products
• @cart is not being set in the products controller– Let’s make it optional
![Page 26: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/26.jpg)
app/views/layouts/application.html.erb
![Page 27: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/27.jpg)
Run tests
• rake test– 1 failure, 0 errors
• We changed a redirect in the line items controller, we need to update the test
![Page 28: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/28.jpg)
test/functional/line_items_controller_test.rb
![Page 29: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/29.jpg)
Testing ajax
• test/functional/line_items_controller_test.rb
![Page 30: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/30.jpg)
What we did
• Moved shopping cart into sidebar• Used :remote => true to Ajaxify our buttons• Used RJS template to update page• Added highlight effect to show changes• Wrote helper to hide cart when it’s empty• Wrote tests to verify Ajax actions
![Page 31: Dash of ajax](https://reader033.vdocuments.net/reader033/viewer/2022061214/549a3aadb47959a7498b4e57/html5/thumbnails/31.jpg)
Homework
• Make clicking the image of the book add the item to the cart via Ajax
• Change Empty Cart action to use Ajax and blind_up effect
• Experiment with other visual effects available• Add a link in the cart next to each item. Clicking the
item should decrement the quantity of that item.• Write a view test to verify the empty cart is not
viewable