Rails AJAX无法在购物车订单项目中运行

Question

我在我的应用程序中的购物车设置中有几个AJAX实例，它们都没有工作。例如，它应该使用AJAX更新菜单栏图标，当一个新项目最初添加到购物车中时，该图标显示购物车中有多少项。

我的新order_item表单如下：

<%= form_for order_item, remote: true do |f| %>
  <h4 class="text-right">Price: <span style="color: green"><%= number_to_currency product.price %></span></h4>
    <div class="input-group">
      <%= f.number_field :quantity, value: 1, class: "form-control", min: 1 %>
      <div class="input-group-btn">
        <%= f.hidden_field :product_id, value: product.id %>
        <%= f.submit "Add to Cart", class: "btn btn-manly add_to_cart", style: "margin: 0" %>
        <span class="order_item_created hidden" style="color: red; font-weight: bolder">Added to Cart!</span>
      </div>
    </div>
  <% end %>

order_items/create.js.erb中的javascript如下所示：

<% if @order.errors.any? || @order_item.errors.any? %>
  alert("not valid.");
<% else %>
  $(".cart-text").html("<%= escape_javascript(render 'layouts/cart_text') %>");
  $(".order_item_created").removeClass("hidden");
<% end %>

我的OrderItemsController#Create是：

  def create
    @order = current_order
    @order_item = @order.order_items.new(order_item_params)
    @order.save
    session[:order_id] = @order.id
  end

根据请求更新，这是我的routes.rb

Rails.application.routes.draw do
  devise_for :users, :controllers => { registrations: 'registrations' }
    resources :users, only: [:show, :update, :index]

  get 'home/index'
  root 'home#index'

  resources :products, only: [:index, :show]
  resource :cart, only: [:show]
  resources :order_items, only: [:create, :update, :destroy]
  resources :charges, only: [:new, :create]
  post 'charges/new'
  get 'charges/shipping'
  get 'charges/address'
  post 'charges/update_order'

  resources :orders, only: [:update, :edit, :show, :create, :index]
  get 'orders/update'
  put "orders/:id/mark_as_placed" => "orders#mark_as_placed", as: "mark_as_placed"
  put "orders/:id/mark_as_shipped" => "orders#mark_as_shipped", as: "mark_as_shipped"
  put "orders/:id/mark_as_cancelled" => "orders#mark_as_cancelled", as: "mark_as_cancelled"

end

我不是一个AJAX向导，所以我希望这里的修复是相对简单的，我忽略了。

附加信息

以下是当单击“添加到购物车”按钮时发生的情况的服务器日志：

Started POST "/order_items" for ::1 at 2017-07-31 12:32:57 -0700
Processing by OrderItemsController#create as JS
  Parameters: {"utf8"=>"✓", "order_item"=>{"size"=>"Small", "quantity"=>"1", "product_id"=>"1"}, "commit"=>"Add to Cart"}
   (0.1ms)  begin transaction
  Product Load (0.3ms)  SELECT  "products".* FROM "products" WHERE "products"."active" = ? AND "products"."id" = ? LIMIT 1  [["active", "t"], ["id", 1]]
  SQL (1.4ms)  INSERT INTO "orders" ("subtotal", "created_at", "updated_at", "order_status_id") VALUES (?, ?, ?, ?)  [["subtotal", 32.0], ["created_at", "2017-07-31 19:32:57.179361"], ["updated_at", "2017-07-31 19:32:57.179361"], ["order_status_id", 1]]
  SQL (0.4ms)  INSERT INTO "order_items" ("quantity", "product_id", "size", "order_id", "unit_price", "total_price", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?, ?)  [["quantity", 1], ["product_id", 1], ["size", "Small"], ["order_id", 5], ["unit_price", 32.0], ["total_price", 32.0], ["created_at", "2017-07-31 19:32:57.184786"], ["updated_at", "2017-07-31 19:32:57.184786"]]
   (1.3ms)  commit transaction
  Order Load (0.3ms)  SELECT  "orders".* FROM "orders" WHERE "orders"."id" = ? LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT  "orders".* FROM "orders" WHERE "orders"."id" = ? LIMIT 1  [["id", 5]]
   (0.3ms)  SELECT COUNT(*) FROM "order_items" WHERE "order_items"."order_id" = ?  [["order_id", 5]]
  CACHE (0.0ms)  SELECT  "orders".* FROM "orders" WHERE "orders"."id" = ? LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT COUNT(*) FROM "order_items" WHERE "order_items"."order_id" = ?  [["order_id", 5]]
  Rendered layouts/_cart_text.html.erb (11.4ms)
  Rendered order_items/create.js.erb (20.6ms)
Completed 200 OK in 61ms (Views: 38.9ms | ActiveRecord: 4.2ms)

这是_cart_text.html.erb

<% if !current_order || current_order.order_items.count != 0 %>
  <li>
    <%= link_to cart_path do %>
      Cart <span style="background-color: red; padding-left: 5px; padding-right: 5px; border-radius: 7px; color: white"><%= current_order.order_items.count %></span>
    <% end %>
  </li>
<% end %>

Answer 1

$(".cart-text").html("<%= escape_javascript(render 'layouts/cart_text') %>");在create.js.erb中有，但是没有任何标记与类名cart-text的选择器匹配。这就是你出问题的原因。

解决方案：

有一个带有类名 cart-text的标记(例如；- div、span或p等)，以便JS找到选择器并用部分代码替换标签的html内容并打印所需的输出。像这样的东西应该能起作用

<div class="cart-text"></div>