Question

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

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

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 %>

用ajax部分渲染表单，表单不起作用（ROR）

相关宝石

new.js.erb

index.html.erb的相关部分

schedules_controller.rb

_form.html.erb

2 个答案: