Rails - javascript不通过远程调用重新加载div

时间:2013-08-07 13:54:24

标签: javascript ruby-on-rails ajax

我正在尝试创建一个时间轴,用户可以在时间轴上创建事件。我以前工作得很好,但是我已经将我的Rails版本更新到3.2.14,它已经不再适用了。如果版本之间发生了某些变化,或者我做错了什么,这可能是一个语法错误吗?

时间轴显示视图呈现包括时间轴的部分,并创建/编辑/销毁事件的部分形式。据我了解,表单已提交,应该调用create.js.erb。

实际发生的是,当我点击“创建事件”时,页面的内容将被标准的“事件已成功创建”通知(不是create.js.erb中的那个)替换,而且否则就消失了。事件已经创建了。有人可以帮忙吗?

时间线显示视图:

<div id="show-timeline">
<%= render :partial => "show_timeline" %>
</div>

<div class="content-box timeline-box">
    <div id="my-timeline-box">
        <%= render :partial => "my_timeline" %>
    </div>
<br />

<button id="new-event-button" class="btn btn-success btn-large">New Event</button>
<button id="edit-events-button" class="btn btn-info btn-large">Edit Events</button>
<button id="delete-events-button" class="btn btn-danger btn-large">Delete Events</button>

<div id="events-forms">
    <div id="new-event">
        <%= render :partial => "new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) }, :remote => true %>
    </div>

    <div id="edit-events">
        <%= render :partial => "edit_events", :locals => { :events => current_user.events }, :remote => true %> 
    </div>

    <div id="delete_events">
        <%= render :partial => "delete_events", :locals => { :events => current_user.events } %>        
    </div>
</div>
<div id="events-forms-edit">&nbsp;</div>

</div>

事件/ create.js.erb

$('#new-event').html('<%= escape_javascript( render :partial => "/timelines/new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) }, :remote => true ) %>');
$('.notice').html("<p>Event was successfully created.</p>");
$('.notice').show(300);
$('#my-timeline-box').html('<%= escape_javascript( render :partial => "/timelines/my_timeline" ) %>');
$('#show-timeline').html('<%= escape_javascript( render :partial => "/timelines/show_timeline" ) %>');
$('#edit-events').html('<%= escape_javascript( render :partial => "/timelines/edit_events", :locals => { :events => current_user.events }, :remote => true ) %>');
$('#delete_events').html('<%= escape_javascript( render :partial => "/timelines/delete_events", :locals => { :events => current_user.events } ) %>');

事件控制器创建动作:

def create
    @event = Event.new(params[:event])
    @timeline = current_user.timeline

    respond_to do |format|
      if @event.save
        format.html { redirect_to @event.timeline, notice: 'Event was successfully created.' }
        format.json { render json: @event, status: :created, location: @event }
        format.js 
      else
        format.html { render action: "new" }
        format.json { render json: @event.errors, status: :unprocessable_entity }
        format.js 
      end
    end
  end

非常感谢任何帮助!

更新:

_new_event.html.erb

<br />
<h2>Add an event</h2>
<h4>Fill in the form and click 'Create Event' to add a new event to the timeline.</h4>

<%= 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 |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
    <%=f.hidden_field 'timeline_id', :value => current_user.timeline.id %>
  <div class="field">
    <%= f.label :date %><br />
    <%= f.date_select :start_date, :order => [:day, :month, :year], :start_year => 1800 %>
  </div>
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :headline, :size => 50 %>
  </div>
  <div class="field">
    <%= f.label :event_description %><br />
    <%= f.text_area :text, :size => "47x4" %>
  </div>
  <%= check_box_tag "blockCheck", :value => "1", :checked => false %>
  <div class="field" id="media_box">
    <%= f.label :media %>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Please paste a URL here</span><br />
    <%= f.text_field :media, :size => 50 %>
  </div>
  <div class="field">
    <%= f.label :media_description %><br />
    <%= f.text_area :caption, :size => "47x3" %>
  </div>
  <div class="actions">
    <%= f.submit 'Create Event', :class => "btn btn-success"  %>
  </div>
<% end %>

控制台输出(单击“创建事件”时):

Started POST "/events" for 127.0.0.1 at 2013-08-07 15:07:03 +0100
Processing by EventsController#create as JS
  Parameters: {"utf8"=>"V", "authenticity_token"=>"ppQnTSwha1veoTzAenrtl7uhtQ8wC
F6c2/AZMDGA/UE=", "event"=>{"timeline_id"=>"4", "start_date(3i)"=>"7", "start_da
te(2i)"=>"8", "start_date(1i)"=>"2013", "headline"=>"", "text"=>"", "media"=>"",
 "caption"=>""}, "commit"=>"Create Event"}
  ←[1m←[36mUser Load (5.0ms)←[0m  ←[1mSELECT "users".* FROM "users" WHERE "users
"."id" = 2 LIMIT 1←[0m
  ←[1m←[35mTimeline Load (15.0ms)←[0m  SELECT "timelines".* FROM "timelines" WHE
RE "timelines"."id" = 4 LIMIT 1
  ←[1m←[36mTimeline Load (38.0ms)←[0m  ←[1mSELECT "timelines".* FROM "timelines"
 WHERE "timelines"."user_id" = 2 LIMIT 1←[0m
  ←[1m←[35m (0.0ms)←[0m  begin transaction
  ←[1m←[36mSQL (6.0ms)←[0m  ←[1mINSERT INTO "events" ("caption", "created_at", "
credit", "end_date", "headline", "media", "start_date", "text", "thumbnail", "ti
meline_id", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)←[0m  [["capti
on", ""], ["created_at", Wed, 07 Aug 2013 14:07:04 UTC +00:00], ["credit", nil],
 ["end_date", nil], ["headline", ""], ["media", ""], ["start_date", Wed, 07 Aug
2013], ["text", ""], ["thumbnail", nil], ["timeline_id", 4], ["updated_at", Wed,
 07 Aug 2013 14:07:04 UTC +00:00]]
  ←[1m←[35m (171.0ms)←[0m  commit transaction
  Rendered timelines/_new_event.html.erb (15.0ms)
  Rendered timelines/_my_timeline.html.erb (0.0ms)
  Rendered timelines/_show_timeline.html.erb (0.0ms)
  ←[1m←[36mEvent Load (30.0ms)←[0m  ←[1mSELECT "events".* FROM "events" INNER JO
IN "timelines" ON "events"."timeline_id" = "timelines"."id" WHERE "timelines"."u
ser_id" = 2←[0m
  Rendered timelines/_edit_events.html.erb (41.0ms)
  Rendered timelines/_delete_events.html.erb (3.0ms)
  Rendered events/create.js.erb (5123.3ms)
Completed 200 OK in 7899ms (Views: 7538.4ms | ActiveRecord: 265.0ms)

然而,没有任何东西被渲染。

1 个答案:

答案 0 :(得分:0)

检查 application.js.coffee 顶部是否有以下行:

#= require jquery
#= require jquery_ujs

如果您不使用咖啡,则行应该相同,但以//=开头。

您似乎不需要Rails Unobtrusive Javascript库,因此您的表单帖子被视为HTML而不是JS。

如果确实涵盖了这种依赖关系,您是否还可以提供与此问题相关的javascript文件的代码?