javascript - The AJAX request cannot see the effect without refresh the browser in Rails

Question

I faced the same problem with this guy

I change rjs to js.erb just like him. And we all use <%= button_to 'Add to Cart',line_items_path(:product_id => product) ,:remote=>true %> to send an AJAX request to the controller. format.js to fine and execute create.js.erb. But the cart did not add anything.

log result :

Rendered line_items/_line_item.html.erb (4.3ms) Rendered carts/_cart.html.erb (8.0ms) Rendered line_items/create.js.erb (8.8ms)

That's the index.html.erb we send the AJAX request

<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>

<% @products.each do |product| %>
<div class="entry">
<%= link_to image_tag(product.image_url), line_items_path(:product_id => product), html_options = {:method => :post} %>
    <h3><%= product.title %></h3>
    <%=sanitize product.description %>
    <div class="price_line">
      <span class="price"><%= number_to_currency(product.price,:precision=>3) %></span>
      <%= button_to 'Add to Cart',line_items_path(:product_id => product) ,:remote=>true %>
    </div>
  </div>
<% end %>

That's the line_items controller function to handle the request

  # POST /line_items
  # POST /line_items.json
  def create
     # for exercise only
    session[:counter] = nil

    @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_index_path }
        format.js
        format.json { render json: @line_item, status: :created, location: @line_item }
      else
        format.html { render action: "new" }
        format.json { render json: @line_item.errors, status: :unprocessable_entity }
      end
    end


  end

create.js.erb

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

Answer 1

I fixed the problem. Thanks to the great article which tell me the ability of firebug to see the source of response from AJAX request. And JSLint helps me checkout the javascript syntax. And finally I would like to thanks the Firebug which is such a great tool.

The problem is that the javascript is not being executed if there is any syntax error.

In my problem:

I should use single-quoted instead of double-qouted to wrap the render results. The render results comes out with many HTML with "", and "" which wrap them will cause syntax error in javascript. (double-qouted in double-qouated is not allowed)

So I simply change $('#cart').html("<%= escape_javascript(render(@cart)) %>"); to $('#cart').html('<%= escape_javascript(render(@cart))%>');

I hope this answer will help the others who also suffer from this nightmare staff. Help me increase the question rate if this is possible :)