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

时间:2015-09-16 05:21:06

标签: javascript ruby-on-rails json ajax

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

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

  • 路由到子域
  • 这最初是一个脚手架

    enter image description here

    的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

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

    应用/视图/活动/ _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>
    

    事件/ 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: 以下是以下任一解决方案的外观 - 每个解决方案都会将索引显示在日历上,如下图所示。 enter image description here

    编辑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>
    
  • 3 个答案:

    答案 0 :(得分:1)

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

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

    答案 1 :(得分:1)

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

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

    <强>事件/ _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 %>
    

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

    我希望可以帮助你。

    答案 2 :(得分:1)

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

    可能的解决方案: 变化

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

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