父表单的Ajax更改字段取决于嵌套表单Cocoon Rails答案

【问题标题】：Ajax change field of parent form depending on nested form Cocoon Rails父表单的Ajax更改字段取决于嵌套表单Cocoon Rails
【发布时间】：2014-06-24 16:47:56
【问题描述】：

抱歉标题搞砸了，但我什至不知道如何正确解释我的问题..

我有一个带有“total_price”字段的预订表单的 Rails 应用程序。该表格可以通过添加/删除房间 茧宝石 https://github.com/nathanvda/cocoon (ajax) 房间模型有一个字段“价格”。

如何根据房间数量和他们选择的类型更新字段 total_price？

reservations/new_html.erb

   <%= simple_form_for @reservation do |f| %>
   <%= f.error_notification %>
<fieldset>
  <%= f.input :date_from, as: :string, input_html: { class: 'date', id: 'checkin',  :placeholder   => 'From' }, :label => false %>

  <%= f.input :date_to, as: :string, input_html: { class: 'date', id: 'checkout', :label => false %>

  <div id="rooms">
    <%= f.fields_for :entries do |entry| %>
        <%= render 'entry_fields', :f => entry %>
    <% end %>

    <%=  link_to_add_association 'add room', f, :entries %>
  </div>

  <%= f.input :total_price, :label => false %>
</fieldset>

<%= f.button :submit %>
<% end %>

reservations/_entry_fields.html.erb

<div class="nested-fields">
  <div class="field">
    <%= f.association :rooms, input_html: { class: 'room-select' },  :label => false %>
    <%= f.number_field :number_of_rooms, input_html: { class: 'room-count' }, :label => false %>
    <%=  link_to_remove_association "Remove room", f %>
  </div>
</div>

ReservationsController

class ReservationsController < ApplicationController
    def new
        @reservation = Reservation.new
    end
    def create
     @reservation = Reservation.new(reservation_params)
     if @reservation.save

      redirect_to root_path, :notice => "Booking Confirmed"
    else
      render "new"
    end
  end

  private
    def reservation_params
    params.require(:reservation).permit(:date_to, :date_from,  entries_attributes: [ :reservation_id, :number_of_rooms, :_destroy, :room_ids => []])
  end
end

我的 apps/assets/javascript/application.js 是空的，除了 jquery 和 cocoon

Cocoon 确实支持回调，但我非常有限的 JS 知识无法提出解决方案。

任何指导将不胜感激， 感谢您的宝贵时间

【问题讨论】：

标签： jquery ruby-on-rails ajax cocoon-gem

【解决方案1】：

嗯，afaik 总价不会在您添加新房间时发生变化，但会在您选择房间或房间数量时发生变化（我假设选择房间实际上选择了一种类型）。

所以你可以使用简单的 jquery。

当您动态移除房间时，总价格会发生变化，您应该为此使用 cocoon:after_remove 回调。

回顾：

当.room-select 或.room-count 收到change 事件时 --> 重新计算总价
cocoon:after-remove 事件触发时 --> 重新计算总价

【讨论】：