Task D: A Dash Of Ajax

In Section 7.4, Playtime, on page 104 one of the activities was to make clicking on the image add the item to the cart. Change this to use form_remote_tag
and image_submit_tag. Discuss

The cart is currently hidden when the user empties it by redrawing the entire catalog. Can you change the application to use the Script.aculo.us blind_up instead? Discuss

Does the change you made work if the browser has JavaScript? disabled? Discuss

Experiment with other visual effects for new cart items. For example, can you set their initial state to hidden and then have them grow into place? Does this make it problematic to share the cart item partial between the AJAX code and the initial page display? Discuss

Add a link next to each item in the cart. When clicked it should invoke an action to decrement the quantity of the item, deleting it from the cart when the quantity reaches zero. Get it working without using AJAX first, and then add the AJAX goodness. Discuss

Note: I had a problem with the code given:
<% form_remote_tag :url => {action = :add_to_cart, :id => product } do %>
<%= submit_tag "Add to Cart" %>
<% end %>

This did not work on my system in spite of much combing through code to find the error. The final_depot code downloaded for app/views/store/index.rhtml has no "do" at the end of the first line, and the tag is not end, it's end_form_tag:

(Dave says: update your Rails…)

I picked up this book since I am brand new to rails and was very, very confused as to why the .rjs files have different naming conventions. Why is add_to_cart.js.rjs not add_to_cart.rjs just like empty_cart? Is it purely because of the html_replace call?

Great book so far. I'm up to page 131. Actually I was up to page 139 but I got an RJS Error, Type Error: element has no properties. So I had to backtrack a bit to make sure I haven't missed anything.

If my Empty Cart button works as expected but my Add to Cart button requires a page refresh (F5) before it updates the quantity and price and total, what should I be looking for? It feels like the shopping cart is working behind the scenes but the page is not refreshing. My app started this behavior after I added the AJAX so I returned everything back to way it was before I started section 9.2. The Add to cart button works again now that the form_remote_tag call has been returned to button_to. Java is enabled in my Fire Fox and the Java Script libraries appear in the page source.

Bill Thayer
Dallas, TX


Moving on to section 9.3 and here is where I get the dreaded RJS Error, Type Error: element has no properties dialog box. After hitting OK the next box as this humongous error message that starts with Element.update("cart"…..)

Note: You can break the visual effects by quickly adding an item to the cart while the closing animation plays after emptying the cart. This can be fixed by making use of the queue feature of scriptaculous. Basically add :queue => "end" to all your visual_effect calls to prevent them from executing in parallel. -amanfredi


After following directions in section 9.2 (An AJAX-Based Cart), I am unable to get AJAX magic to work. The cart object updates only after clicking the refresh button (Firefox/3.0.3). Here are the steps I followed:

1) Added <form_remote_tag> syntax to /store/index.rhtml (p.119).
2) Added javascript_include_tag (p.120).
3) Added page.replace_html() call (p. 120).

Have tried all techniques under "Troubleshooting" (p.121) but the problem remains. A newbie to Rails, I would appreciate any suggestions on how to proceed.


Trientalis says to Uma:

One idea could be, that the javascript template has a wrong name or is in the wrong directory.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License