我有一个简单的事件应用程序,在索引页面上有一个“新事件”表单。它应该创建一个新事件并更新索引页面而无需重新加载页面。我已经尝试禁用 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>
最佳答案
在应用 View 事件中创建一个新模板和app/views/events/create.js.erb
。并编写类似
content = '<%= escape_javascript render(@events) %>'
$('tbody').fadeOut('slow').html(content).fadeIn('slow')
关于javascript - Rails 4 - ajax 不起作用,我需要刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32600333/