small medium large xlarge


Activity 1

In Section 8.4, Playtime, on page 117 one of the activities was to make clicking on the image add the item to the cart. Change this to use :remote => true and image_submit_tag. Discuss

Activity 2

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

Activity 3

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

Activity 4

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

Activity 5

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

Activity 6

Write a test for empty cart. Verify that the cart has been removed from the sidebar. 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.

Regards, 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 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.

Thanks! Uma

Trientalis says to Uma:

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

Neville says

I am having the same problem that Bill described above… “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…”

The problem seems to be coming from the process of hiding the cart’s div tag when the cart is empty, in the store layout, with <% hidden_div_if(@cart.items.empty?, :id => “cart” ) do %> If we use the previous suggestion in the book (without the helper method, rather putting the if statement directly in div tag in the store layout file itself), the same thing happens.

It appears to me that the problem comes from the store.html.erb layout not being reloaded by the AJAX response, so the style=”display: none” that was applied to the cart’s div tag when that cart was empty, is not being removed, so the cart stays hidden. When the store page is reloaded, the style of the cart’s div tag is re-evaluated, and so it then becomes visible.

In case it is my environment causing this…
  • I have tried this with both Google Chrome and IE6 as my browser, with the same result.
  • I am using Ruby 1.8.6 with Rails 2.2.2
Having gotten that far with the diagnosis, but being a newbie to Rails, I have 2 questions:
  • 1. Why are so many other people obviously not getting this effect? (The same code has been in the book since at least the Second edition, and now into the Third.)
  • 2. How to fix it?

Does anyone have any suggestions please?

All fixed: There must have been something wrong with my original visual_effect line in the add_to_cart.js.rjs file. Now I have replaced it with the correct line “page[:cart].visual_effect :blind_down if @cart.total_items == 1” it all works okay. —

Adam says

I’m also having this issue with the page continuing to redirect when an item is added to the cart. The cart doesn’t update until I navigate back to the store and refresh. Does anyone have a fix for this yet?

Angel says

I also have a problem with chapter 9.3 adding AJAX . I keep getting an “try” error. I can’t get it to work. can I get some help please ?

Paulette says

I seem to have same issue here. Ajax is not working. Is it something with the code in the example? Because I tried Ajax on another application and it worked fine. Troubleshooted but still the same. Cart updates only on page refresh. Does anyone have a fix please?

Dextro says

I have the same problem. The different partials seem the render, but the replace_html does not work.

Rendered line_items/_line_item.html.erb (58.8ms)
Rendered carts/_cart.html.erb (70.9ms)
Rendered store/index.html.erb within layouts/application (93.2ms)
Completed 200 OK in 123ms (Views: 97.6ms | ActiveRecord: 2.2ms)

Seems to be a bug in rails and will be fixed in version 3.0.2 (expected on Nov 15th) rails ticket: render with a partial in rjs fails


No idea why, but now it works. So it is no bug, but maybe caching.

Jim says

Try adding a div tag with an id of “cart” around the existing cart partial (_app/views/carts/_cart.html.erb).

Safari vs. Chrome vs. Firefox

I’m going through this chapter and everything described works in Chrome, such as highlighting line item additions as blind-down\blind-up the cart when it is created/removed.

In Firefox and Safari, any attempt I make to add line items results in the effect working, however the existing line item is overwritten in the view by the new line item, rather than being added. Has anyone experienced this?

Page History
  • V35: Matt Gerharter [almost 7 years ago]
  • V34: Matt Gerharter [almost 7 years ago]
  • V33: Matt Gerharter [almost 7 years ago]
  • V32: Matt Gerharter [almost 7 years ago]
  • V31: Matt Gerharter [almost 7 years ago]
  • V30: Karen Zeller [about 7 years ago]
  • V29: Jim Treadway [about 7 years ago]
  • V28: Jim Treadway [about 7 years ago]
  • V27: Bert Pattyn [over 7 years ago]
  • V26: Bert Pattyn [over 7 years ago]