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

Question

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

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

到子域的路由

这本来是脚手架

gem 文件:

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

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

的代码

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