dimanche 3 mai 2015

rendering form in partial with ajax, form does not function (ROR)

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.

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>

Aucun commentaire:

Enregistrer un commentaire