Rails 3.1 AJAX supported changes not reflected in browser

Question

Running Rails 3.1 Ruby 1.92

I am trying to get my shopping cart to update using AJAX. I have the following button in my store front to create a line item

 <%= button_to " Buy ", line_items_path(product_id: product), remote: true, :class =>"blue-btn" %>

and the following create action in my line_items controller

def create
@cart = current_cart
product = Product.find(params[:product_id])
@line_item = @cart.add_product(product.id)
respond_to do |format|
 if @line_item.save
 format.html { redirect_to store_url,notice: 'your item was added.' } 
 format.js { @current_item = @line_item }
 format.json { render json: @line_item,
 status: :created, location: @line_item }

lastly i have the following RJS code in a create.js.erb template located in my app/views/line_items directory:

 $('#cart').html("<%=j render @cart %>");

However when i add items to the cart i have to refresh the page in order to see the updated quantity and total. I checked the server logs after each attempt to add an item to the cart and its showing that it rendered line_items/create.js.erb Ive included the full log below any help would be much appreciated

Started POST "/line_items?product_id=1" for 127.0.0.1 at 2013-08-04 14:01:26 -0400 Processing by LineItemsController#create as JS Parameters: {"authenticity_token"=>"2TxUMUloihqhzGHlZrC9YKNPGNhfwZ070lEW64uL0SY=", "product_id"=>"1"} ←[1m←[35mCart Load (1.0ms)←[0m SELECT "carts".* FROM "carts" WHERE "carts"."id" = ? LIMIT 1 [["id", 64]] ←[1m←[36mProduct Load (0.0ms)←[0m ←[1mSELECT "products".* FROM "products" WHERE "products"."id" = ? LIMIT 1←[0m [["id" , "1"]] ←[1m←[35mLineItem Load (0.0ms)←[0m SELECT "line_items".* FROM "line_items" WHERE "line_items"."cart_id" = 64 AND "line_ items"."product_id" = 1 LIMIT 1 ←[1m←[36m (0.0ms)←[0m ←[1mbegin transaction←[0m ←[1m←[35mSQL (1.0ms)←[0m INSERT INTO "line_items" ("cart_id", "created_at", "order_id", "product_id", "quantity", "upda ted_at") VALUES (?, ?, ?, ?, ?, ?) [["cart_id", 64], ["created_at", Sun, 04 Aug 2013 18:01:26 UTC +00:00], ["order_id", n il], ["product_id", 1], ["quantity", 1], ["updated_at", Sun, 04 Aug 2013 18:01:26 UTC +00:00]] ←[1m←[36m (103.3ms)←[0m ←[1mcommit transaction←[0m ←[1m←[35mLineItem Load (1.0ms)←[0m SELECT "line_items".* FROM "line_items" WHERE "line_items"."cart_id" = 64 ←[1m←[36mProduct Load (0.0ms)←[0m ←[1mSELECT "products".* FROM "products" WHERE "products"."id" = 2 LIMIT 1←[0m ←[1m←[35mProduct Load (0.0ms)←[0m SELECT "products".* FROM "products" WHERE "products"."id" = 1 LIMIT 1 Rendered carts/_cart.html.erb (21.0ms) Rendered line_items/create.js.erb (22.0ms) Completed 200 OK in 136ms (Views: 26.0ms | ActiveRecord: 106.3ms)

Christoph Eicke Christoph Eicke · Accepted Answer · 2013-08-04T19:43:49

I don't see anything wrong with your code, but here are my thoughts:

I'm not sure about the internals of your @cart.add_product(...) method, the code looks like it returns the updated complete cart object (with the added product), correct?
In the browser (with Firebug or whatever), do you see the server sending you the HTML snippet that is supposed to be inserted?

Rails 3.1 AJAX supported changes not reflected in browser

2 Answers