Rails 4 - ajax 不起作用，我需要刷新页面

Question

我有一个简单的事件应用程序，在索引页面上有一个“新事件”表单。它应该创建一个新事件并更新索引页面，而无需重新加载页面。我已经尝试禁用 turbo-link as per this stackoverflow post 但无济于事。最后，它在同一页面上还有一个日历，我想用事件索引来更新它。

以下是可能影响解决方案的快速列表：

路由到子域

这原本是一个脚手架

宝石文件：

## abbreviated ##
        gem 'coffee-rails', '~> 4.1.0'
        gem 'jquery-rails'
        gem 'jquery-turbolinks'
        gem 'jbuilder', '~> 2.0'
        gem 'simple_calendar', '~> 2.0.1'
        gem 'bootstrap-sass', '~> 3.3.5'

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .

events_controller.rb

class EventsController < ApplicationController
  def index
    @events = @account.events.all
    @event = @account.events.new
  end

  def create
    @event = @account.events.new(event_params)
    @event.save!

    @events = @account.events.all

    respond_to do |format|
      format.html { redirect_to events_path }
      # supposedly this line below appends my partial from 'app/views/events/_event.html.erb
      format.js 
    end
  end
## abbreviated ##

app/views/events/_event.html.erb

<tr>
  <td><%= event.location %></td>
  <td><%= event.time.strftime("%I:%M %p") %></td>
  <td><%= event.event_name %></td>
  <td><%= link_to 'Show', event %></td>
  <td><%= link_to 'Edit', edit_event_path(event) %></td>
  <td><%= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

events/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Listing Events</h1>

<div class="fluid-container">
  <div class="col-xs-7">
    <%= month_calendar attribute: :time, events: @events do |date, time_slots| %>
      <%= date.strftime("%m/%d") %>

      <% time_slots.each do |event| %>
        <div>
          <%= link_to event.event_name, event %>
        </div>
      <% end %>
    <% end %>
  </div><!--col-xs-7-->
  <div class="col-xs-5">
    <br />

    <p>
    <%= link_to "Toggle Events", "#", id: "events-link" %>
    </p>

    <section id="events-section">
      <%# <%= render 'form' %1> %>
      <%= form_for(@event, remote: true) do |f| %>
        <% if @event.errors.any? %>
          <div id="error_explanation">
            <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>

            <ul>
              <% @event.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
            </ul>
          </div>
        <% end %>

        <div class="form-group">
          <%= f.label :location %><br>
          <%= f.text_field :location, class: 'form-control' %>
        </div>
        <div class="field form-group">
          <%= f.label :time %><br>
          <%= f.datetime_select :time, class: 'form-control' %>
        </div>
        <div class="field form-group">
          <%= f.label :event_name %><br>
          <%= f.text_field :event_name, class: 'form-control' %>
        </div>
        <div class="actions">
          <%= f.submit class: "btn btn-primary" %>
        </div>
      <% end %>

      <h3>All events</h3>

      <div class="panel panel-default" >
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Location</th>
              <th>Time</th>
              <th>Event name</th>
              <th colspan="3"></th>
            </tr>
          </thead>
          <tbody>
            <%= render @events %>
          </tbody>
        </table>
      </div><!--panel-->
    </section>
    <br />
  </div><!--col-xs-5-->
</div><!--container-->

编辑 1： 忘记包含我的 create.js.erb 文件：

create.js.erb

$('#events').append("<%= j render @event %>");

编辑 2： 以下是以下任一解决方案的外观 - 每个解决方案都将索引呈现到日历上，如下图所示。

编辑 3： 将 create.js.erb 更改为以下内容。但是，只有 index_content 部分有效。

index_content = '<%= escape_javascript render(@events) %>'
$('#events-section').html(index_content)

calendar_content = '<%= escape_javascript render('calendar') %>'
$('#calendar-section').html(calendar_content)

创建新文件app/views/events/_calendar.html.erb：

<div class="simple-calendar">
  <%= link_to "Previous", start_date: date_range.first - 1.day  %>
  <%= I18n.t("date.month_names")[start_date.month] %> <%= start_date.year %>
  <%= link_to "Next", start_date: date_range.last + 1.day  %>

  <div class="panel panel-default">
  <table class="table table-striped">
    <thead>
      <tr>
        <% date_range.slice(0, 7).each do |day| %>
          <th><%= I18n.t("date.abbr_day_names")[day.wday] %></th>
        <% end %>
      </tr>
    </thead>

    <tbody id="calendar-section>
      <% date_range.each_slice(7) do |week| %>
        <tr>
          <% week.each do |day| %>
            <%= content_tag :td, class: calendar.td_classes_for(day) do %>
              <% block.call day, sorted_events.fetch(day, []) %>
            <% end %>
          <% end %>
        </tr>
      <% end %>
    </tbody>
  </table>
  </div><!--panel-->
</div>

Answer 1

在应用视图事件中创建一个新模板和app/views/events/create.js.erb。并编写类似

的代码

content = '<%= escape_javascript render(@events) %>'
$('tbody').fadeOut('slow').html(content).fadeIn('slow')

Answer 2

您正在尝试将该行附加到 #events，但在 html 中我看不到任何 ID 为 events 的元素。

可能的解决方案： 改变

  <tbody>
    <%= render @events %>
  </tbody>

与

  <tbody id="events">
    <%= render @events %>
  </tbody>

Answer 3

让我帮你解决这个问题。您必须执行以下操作：

events/index.html.erb

更改日历部分中的 index.html.erb 代码并添加新属性 id="calendar-section"：

<p id="notice"><%= notice %></p>

<h1>Listing Events</h1>

<div class="fluid-container">
  <div id="calendar-section" class="col-xs-7">
    <%= month_calendar attribute: :time, events: @events do |date, time_slots| %>
      <%= date.strftime("%m/%d") %>

      <% time_slots.each do |event| %>
        <div>
          <%= link_to event.event_name, event %>
        </div>
      <% end %>
    <% end %>
  </div><!--col-xs-7-->
  <div class="col-xs-5">
    <br />

    <p>
    <%= link_to "Toggle Events", "#", id: "events-link" %>
    </p>

    <section id="events-section">
      <%# <%= render 'form' %1> %>
      <%= form_for(@event, remote: true) do |f| %>
        <% if @event.errors.any? %>
          <div id="error_explanation">
            <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>

            <ul>
              <% @event.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
            </ul>
          </div>
        <% end %>

        <div class="form-group">
          <%= f.label :location %><br>
          <%= f.text_field :location, class: 'form-control' %>
        </div>
        <div class="field form-group">
          <%= f.label :time %><br>
          <%= f.datetime_select :time, class: 'form-control' %>
        </div>
        <div class="field form-group">
          <%= f.label :event_name %><br>
          <%= f.text_field :event_name, class: 'form-control' %>
        </div>
        <div class="actions">
          <%= f.submit class: "btn btn-primary" %>
        </div>
      <% end %>

      <h3>All events</h3>

      <div class="panel panel-default" >
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Location</th>
              <th>Time</th>
              <th>Event name</th>
              <th colspan="3"></th>
            </tr>
          </thead>
          <tbody>
            <%= render @events %>
          </tbody>
        </table>
      </div><!--panel-->
    </section>
    <br />
  </div><!--col-xs-5-->
</div><!--container-->

events/_calendar.html.erb

创建一个新的渲染部分文件app/views/events/_calendar.html.erb。将局部变量 @events 删除到 events 中。这个例子：

<%= month_calendar attribute: :time, events: events do |date, time_slots| %>
  <%= date.strftime("%m/%d") %>

  <% time_slots.each do |event| %>
    <div>
        <%= link_to event.event_name, event %>
    </div>
  <% end %>
<% end %>

events/create.js.erb

创建新文件app/views/events/create.js.erb。添加局部变量@events

    $("#error_explanation > ul").html("")

    <% if @event.errors.any? %>
      <% @event.errors.full_messages.each do |message| %>
        $("#error_explanation > ul").append($("<li />").html("<%= message.html_safe %>"))
      <% end %>
    <% else %>
       $('tbody').html("<%= escape_javascript(render 'event') %>");
       $('#calendar-section').html("<%= escape_javascript(render(:partial => 'calendar', :locals => {:events => @events})) %>");
    <% end %>

希望能帮到你。