rendered in part with ajax, the form does not work (ROR)

advertisements

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