Rails - 用于新建/创建动作的AJAX

时间:2012-10-16 12:45:54

标签: javascript jquery ruby-on-rails ajax

我有一个时间表,其中包含事件部分,以便您可以直接在时间线页面上进行CRUD事件。我已经让它工作了,你可以删除一个事件,删除部分与时间线一起刷新,而不刷新页面。

但我不能让它为新事件工作,或编辑一个事件。请有人帮我弄清楚我哪里出错了吗?谢谢!

我已经在这里放置了一个新事件的代码,因为我确定在新事件和删除之间,我可以找出如何对编辑进行排序。

时间表/显示:

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

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

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

时间表/ _new_event.html.erb:

<%= form_for(event) 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 %>

事件/ create.js.erb:

$('#new-event').html('<%= escape_javascript( render :partial => "/timelines/new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) } ) %>');
$('.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" ) %>');

事件控制器:

def new
    @event = Event.new

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @event }
      format.js
    end
  end

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

    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

1 个答案:

答案 0 :(得分:1)

时间轴/节目视图中:remote => true上的render :partial选项不是必需的。

相反,form_for中的_new_event.html.erb应该有以下选项:remote(这使表单通过ajax提交)和:format(这要求响应在JavaScript中),例如:

<%= form_for event, :remote => true, :format => :js do |f| %>