使用 ajax 创建和更新表单后无法呈现新的部分表单答案

【问题标题】：Unable to render new partial form after creating and updating forms using ajax使用 ajax 创建和更新表单后无法呈现新的部分表单
【发布时间】：2020-04-08 16:37:09
【问题描述】：

我正在使用 Rails 5.2 红宝石 2.6

我正在尝试在单击添加按钮时渲染部分表单，这对我来说很好，但是当我在创建新的部分表单后尝试创建表单时没有呈现，同样的问题我在更新后也面临编辑表单形式不来。听到是我的代码

app/controllers/evnet_booking_details_contrller.rb

 def new
 @event_booking_detail = EventBookingDetail.new
 @event_booking_id = params[:id]
 @event_booking = EventBooking.find(@event_booking_id)
end

def edit
 @event_booking_detail = EventBookingDetail.find(params[:id])
end


def create

  @event_booking_detail = EventBookingDetail.new(event_booking_detail_params)
  event_booking_id = @event_booking_detail.event_booking_id
  @event_booking = EventBooking.find_by(id: event_booking_id)

respond_to do |format|
  if @event_booking_detail.save
    # redirect_back(fallback_location: event_booking_details_path,notice:"Event Details Added Successfully")
    # return
    format.js {}
    format.html { redirect_to @event_booking_detail, notice: 'Event Booking successfully Created.'}
    format.json { render :show, status: :created, location: @event_booking_details }
  else
    format.html { render :new }
    format.json { render json: @event_booking_detail.errors, status: :unprocessable_entity }
  end
 end

end

  def update
    event_booking_id = @event_booking_detail.event_booking_id
    @event_booking = EventBooking.find_by(id: event_booking_id)
    respond_to do |format|
    if @event_booking_detail.update(event_booking_detail_params)
    # redirect_back(fallback_location: event_booking_details_path,notice:"Event Details Updated Successfully")
    # return
    format.js{}
    format.html {redirect_to @event_booking_detail, notice: 'Event Booking successfully Updated.' }
    format.json { render :show, status: :ok, location: @event_booking_detail }
  else
    format.html { render :edit }
    format.json { render json: event_booking_detail.errors, status: :unprocessable_entity }
  end
  end
end

app/views/event_bookings/show.html.erb

<div class="row">
 <div class="col-lg-12">
   <div class="card">
     <div class="card-header">
       <h5>Trip Details</h5>       

         </div> <!-- /.card header -->

    <div class="card-body"> 
    <%= link_to "Add Trip Details",new_event_booking_detail_path,remote: true,class: "btn btn-primary"  %>   
   <div id="new_event_detail">  </div>
   <div id="edit_event_detail"></div>
 </div>


  </div>
 </div>
 </div>

app/views/event_bookings/show.js.erb

 $("#new_event_detail").empty();
  $("#edit_event_detail").empty();
   $("<%= escape_javascript(render 'event_booking_details/new')  %>").appendTo("#new_event_detail")

app/views/event_booking_details/_new.html.erb

  <%= form_for(@event_booking_detail, remote: true) do |f| %>


   <div class="row">
  <div class="col-sm-3">
  <label>Source</label>
  <%= f.text_field :source,class: "form-control" %>
   <div id = "Source" ></div>
 </div>

  <div class="col-sm-3">
    <label>Destination</label>
    <%= f.text_field :destination, class: "form-control" %>
     <div id = "Destination" ></div>
 </div>
  <div class="col-sm-3">
      <label>Start Date</label>
     <%= f.text_field :event_start_date,class: "form-control", id: "event_start_date" %>
    <div id = "EventStart" ></div>
   </div>

  <div class="col-sm-3">
    <label>End Date</label>
    <%= f.text_field :event_end_date, class: "form-control", id: "event_end_date" %>
    <div id = "EventEnd" ></div>
   </div>
        <%= f.hidden_field :event_booking_id, value: @event_booking.id %>

  </div>
 <br>

   <div style="float: right;">
  <%= f.submit "Submit",class: "btn btn-primary" %>
 </div>
 <% end %>

app/views/event_booking_details/new.js.erb

$("#new_event_detail").empty();
 $("<%= escape_javascript(render 'event_booking_details/new' ,locals: {id: @event_booking.id} ).html_safe %>").appendTo("#new_event_detail")

app/views/event_booking_details/create.js.erb

 $("#edit_event_detail").empty();
  $("#new_event_detail").empty();
 $("<%= escape_javascript(render 'event_booking_details/new').html_safe  %>").appendTo("#new_event_detail")

app/views/event_booking_details/_edit.html.erb

   <%= form_for(@event_booking_detail, remote: true) do |f| %>
     <div class="row">
      <div class="col-sm-3">
        <label>Source</label>
        <%= f.text_field :source,class: "form-control" %>
       <div id = "Source" ></div>
           </div>

         <div class="col-sm-3">
           <label>Destination</label>
          <%= f.text_field :destination, class: "form-control" %>
          <div id = "Destination" ></div>
         </div>
        <div class="col-sm-3">
       <label>Start Date</label>
        <%= f.text_field :event_start_date,class: "form-control", id: "event_start_date" %>
        <div id = "EventStart" ></div>
       </div>

              <div class="col-sm-3">
            <label>End Date</label>
           <%= f.text_field :event_end_date, class: "form-control", id: "event_end_date" %>
          <div id = "EventEnd" ></div>
               </div>
          <%= f.hidden_field :event_booking_id, value: @event_booking.id %>

         </div>
         <br/>

     <div style="float: right;">
         <%= f.submit "Update",class: "btn btn-primary" %>
      </div>
      <% end %>

app/views/event_booking_details/edit.js.erb

  $("#new_event_detail").empty();
  $("#edit_event_detail").empty();
    $("<%= escape_javascript(render 'event_booking_details/edit').html_safe %>").appendTo("#edit_event_detail")

app/views/event_booking_details/update.js.erb

   $("#new_event_detail").empty();
   $("#edit_event_detail").empty();
   $("<%= escape_javascript(render 'event_booking_details/edit').html_safe %>").appendTo("#edit_event_detail")

app/model/event_booking.rb

has_many :event_booking_details

我无法清除表单，请帮我解决此问题。

【问题讨论】：

标签： javascript ruby-on-rails ruby ajax

【解决方案1】：

这是节省吗？

respond_to do |format|
  if @event_booking_detail.save
    # redirect_back(fallback_location: event_booking_details_path,notice:"Event Details Added Successfully")
    # return
    format.js {}
    format.html { redirect_to @event_booking_detail, notice: 'Event Booking successfully Created.'}
    format.json { render :show, status: :created, location: @event_booking_details }
  else
    format.html { render :new }
    format.json { render json: @event_booking_detail.errors, status: :unprocessable_entity }
  end
 end

end

也许它会进入 else 语句。 else 语句中没有 format.js。

【讨论】：

保存工作正常，但保存的数据显示在同一显示页面的列表中，不是自动加载到列表中

【解决方案2】：

请更改您的问题标题。它不包括信息，你有什么问题。

如果我能够理解您的问题，则这部分不起作用：

$("#new_event_detail").empty();
$("#edit_event_detail").empty();

如果在初始渲染后添加了节点，jQuery 不知道这些节点存在。用纯javascript试试吧：

document.getElementById('new_event_detail').innerHTML = '';
document.getElementById('edit_event_detail').innerHTML = '';

【讨论】：