使用ajax部分呈现表单，表单不起作用（ROR）

Question

我对使用 ajax 还很陌生，所以我真的希望有任何简单的解决方法。目前发生的事情是我单击“新计划条目”并将一个表单附加到表中（请参阅_form.html.erb）。问题是表格不起作用。提交不起作用，date_picker/time_picker 不显示，HTML5 验证不弹出。我觉得我缺少一个简单的解决方案。

编辑：为了消除混乱，我目前的目标是使用 ajax 渲染部分并让它正常提交，而不是远程提交。如果我在没有 ajax 的情况下呈现表单，它工作正常。此外，如果我将 $('.datetimepicker').datetimepicker(); 添加到 new.js.erb，日期选择器将正常工作。我还删除了 turbolinks，但我仍然遇到同样的问题。

相关宝石

• gem 'turbolinks'
• gem 'jquery-turbolinks'
• gem 'jquery-rails'

new.js.erb

$('#schedule-table-tbody').prepend("<%= j(render partial: 'form') %>");

index.html.erb 的相关部分

<%= link_to 'New Schedule Entry', new_schedule_path, remote: true %>
<div class="table-responsive">
  <table id="schedule-table" class="table table-hover table-striped table-condensed">
    <thead>
    <tr>
      <th class="col-xs-2">Date</th>
      <th class="col-xs-2">Start Time</th>
      <th class="col-xs-2">End Time</th>
      <th class="col-xs-6">Details</th>
    </tr>
    </thead>
    <tbody id="schedule-table-tbody">

schedules_controller.rb

class SchedulesController < ApplicationController
  respond_to :html, :js

  def index
    @schedules = Schedule.page(params[:page]).per(20)
  end

  def show
    @schedule = Schedule.find(params[:id])
  end

  def new
    @schedule = Schedule.new
  end

  def create
    @schedule = Schedule.new(schedule_params)
    if (@schedule.save)
      flash['main|success'] = 'Successfully created schedule entry.'
      redirect_to schedules_path
    else
      render 'index'
    end
  end

  private

  def schedule_params
    params.require(:schedule).permit(:name, :date, :start_time, :end_time)
  end
end

_form.html.erb

<tr>
  <%= simple_form_for @schedule do |f| %>
      <td>
        <%= f.input_field :date, :as => :date_picker, label: false %>
      </td>
      <td>
        <%= f.input_field :start_time, :as => :time_picker, label: false %>
      </td>
      <td>
        <%= f.input_field :end_time, :as => :time_picker, label: false %>
      </td>
      <td>
        <%= f.input_field :name, label: false %>
      </td>
      <td>
        <%= f.button :button, class: "btn btn-primary" do %>
            <span class='glyphicon glyphicon-ok'></span> Save
        <% end %>
      </td>
  <% end %>
</tr>

Answer 1

在_form.html.erb中你应该像这样输入remote: true

<%= simple_form_for @schedule, remote: true do |f| %>

你应该把<tr> 放在这样的表格里面。它有效，但我认为它仍然有效标记。你应该把<form>放在<td>里面或者<table>外面

<%= simple_form_for @schedule do |f| %>
<tr>
  <td>
    <%= f.input_field :date, :as => :date_picker, label: false %>
  </td>
  <td>
    <%= f.input_field :start_time, :as => :time_picker, label: false %>
  </td>
  <td>
    <%= f.input_field :end_time, :as => :time_picker, label: false %>
  </td>
  <td>
    <%= f.input_field :name, label: false %>
  </td>
  <td>
    <%= f.button :button, class: "btn btn-primary" do %>
    <span class='glyphicon glyphicon-ok'></span> Save
    <% end %>
  </td>
</tr>
<% end %>

Answer 2

这是因为您使用的是简单按钮而不是提交按钮。将 f.button 更改为 f.submit

f.submit :button, class: "btn btn-primary" do %>
  <span class='glyphicon glyphicon-ok'></span> Save
<% end %>