Невозможно отобразить новую частичную форму после создания и обновления форм с использованием ajax

Question

Я использую рельсы 5.2 ruby 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 

Я не могу очистить форму, пожалуйста, помогите мне решить эту проблему.

Answer 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. У вас нет формата. js в выражении else.

Answer 2

Пожалуйста, измените название вопроса. Он не включает информацию о том, с какой проблемой вы столкнулись.

Если я смог понять ваш вопрос, эта часть не работает:

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

Если после начального рендеринга добавлены узлы jQuery не знает, что эти узлы есть. Попробуйте это с чистым javascript:

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