아약스 변화 필드 엉망 제목 죄송합니다

Question

하지만조차 제대로 내 문제를 설명하는 방법을 모르겠어요 ..

내가 가진이있는 예약 양식을 사용하여 응용 프로그램을 레일 필드 "total_price". 양식은 누에 고치 https://github.com/nathanvda/cocoon (ajax) 객실 모델에 대해 "가격"필드를 통해 객실을 추가/제거 할 수 있습니다.

얼마나 많은 방과 선택한 유형에 따라 total_price 필드를 업데이트 할 수 있습니까?/_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 

내 애플 리케이션/자산/자바 스크립트/application.js

예약/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 %> 

예약이 비어 jquery 및 누에 고치 포함 제외

코쿤은 콜백을 지원하지만, 매우 제한적인 JS 지식만으로는 해결책을 찾을 수 없습니다. 당신이 방 또는 번호를 선택하면 시간

Answer 1

음에 대한

모든 지침이 크게 appriciated 것, 덕분에, 당신은 새로운 방을 추가 할 때 총 가격은 변경되지 않습니다 AFAIK, 그것은 변경 방 (실제로 방을 선택하면 유형을 선택한다고 가정합니다).

그래서 간단한 jquery를 사용할 수 있습니다.

방을 동적으로 제거하면 총 가격이 변경되므로 cocoon:after_remove 콜백을 사용해야합니다.

요점 - cocoon:after-remove 이벤트가 트리거 될 때> 전체 가격 재 계산

-.room-select 또는 .room-count가 change 이벤트를 수신 할 때

• > 전체 가격 재 계산