I'm fairly new to using ajax so I'm really hoping there is any easy fix to this. Currently what happens is I click 'New Schedule Entry' and a form gets appended to the table (see _form.html.erb). The issue is that the form does not work. Submit doesn't work, the date_picker/time_picker doesn't show up, the HTML5 validation doesn't pop up. I feel like there is a simple solution to this that I am missing.

Edit: To remove confusion, my current goal is to render the partial with ajax and have it submit normally, not remotely. If I render the form without ajax it works fine. Also if I add $('.datetimepicker').datetimepicker(); to new.js.erb, the date picker works correctly. I also removed turbolinks and I'm still having the same issue.

Relevant gems

• gem 'turbolinks'
• gem 'jquery-turbolinks' <--added because I was hoping this would fix the issue
• gem 'jquery-rails'

new.js.erb

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

relevant part of 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>

In the _form.html.erb you should put remote: true like this

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

And you should place <tr> inside form like this. It works but i think it still ivalid markup. You should place <form> inside <td> or outside of <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 %>

more