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

I have a simple event app with a 'new event' form on the index page. It should create a new event and update the index page without having to reload the page. I already tried disabling turbo-link as per this * post but to no avail. Lastly, it also has a calendar on the same page that I'd like to update with the index of events.

我有一个简单的事件应用程序，在索引页面上有一个“新事件”表单。它应该创建一个新的事件并更新索引页，而不必重新加载页面。我已经按照这个* post尝试禁用涡轮链接，但没有任何效果。最后，它在同一个页面上也有一个日历，我想用事件索引更新它。

Here's a quick list of things that might factor into a solution:

以下是一个可能成为解决方案的因素的快速列表:

routes to a subdomain

路线一个子域名

this was originally a scaffold

Gemfile:

Gemfile:

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

application.js

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

events_controller.rb

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

app / views /事件/ _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

事件/ 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-->

EDIT 1: Forgot to include my create.js.erb file:

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

create.js.erb

create.js.erb

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

EDIT 2: Here's what it looks like with either of the solutions below - each solution renders the index on to the calendar like you see in the picture below.

编辑2:下面的两个解决方案都是这样的——每个解决方案都将索引显示在日历上，如下图所示。

EDIT 3: Changed create.js.erb to the following. However, only the index_content part works.

create.js编辑3:改变。以下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)

Created new file app/views/events/_calendar.html.erb:

创建新文件app / views /事件/ _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>

3 个解决方案

#1

In app views events create a new template and app/views/events/create.js.erb. And write the code something like

在app视图事件中创建一个新的模板和应用/视图/事件/创建。然后编写代码

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

#2

You are trying to append the row into #events but in the html I can't see any element with id events.

您正在尝试将行添加到#events中，但是在html中，我看不到任何带有id事件的元素。

Possible solution: change

可能的解决方案:改变

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

with

与

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

#3

Let me help you to fix this. You have to do the following:

我来帮你解决这个问题。你必须做到以下几点:

events/index.html.erb

事件/ index.html.erb

Change your index.html.erb code in calendar section and add a new attribute id="calendar-section":

改变你的index . html。erb代码在calendar部分，添加一个新的属性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

事件/ _calendar.html.erb

Create a new render partial file app/views/events/_calendar.html.erb. Remove locals variable @events into events. This example:

创建一个新的渲染部分文件应用程序/视图/事件/_calendar.html.erb。将局部变量@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

事件/ create.js.erb

Create new file app/views/events/create.js.erb. Add locals variable @events

创建新文件app /视图/事件/ 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 %>

I hope can help you.

我希望能帮到你。