Question

Possible Duplicate:
Rails – AJAX to for new/create action

I have a timeline that has partials for events on it, so you can CRUD events directly on the timeline. I’ve got the delete part working fine, so that the delete partial and the timeline refresh each time an event gets deleted. However, I can’t get it working when a new event is created. Instead of refreshing the form and the timeline, the whole page refreshes.

I’m assuming this is something to do with the controller? But I can’t seem to fix it. Any help would be much appreciated, thanks :0)

events controller:

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

timeline/show:

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

timeline/_new_event:

<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) 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", :remote => true  %>
  </div>
<% end %>

events/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" ) %>');

(The bottom two lines are to refresh the timeline iteself).

UPDATE:

Here is the error message:

Started POST "/events" for 127.0.0.1 at 2012-10-16 14:52:37 +0100
Processing by EventsController#create as JS
  Parameters: {"utf8"=>"V", "authenticity_token"=>"i8oiRI7rOLsfb5o45QCK0te/hAsWv
BMTqpxU9KrbmNA=", "event"=>{"timeline_id"=>"1", "start_date(3i)"=>"16", "start_d
ate(2i)"=>"10", "start_date(1i)"=>"2012", "headline"=>"", "text"=>"", "media"=>"
", "caption"=>""}, "commit"=>"Create Event"}
  ←[1m←[35m (0.0ms)←[0m  begin transaction
  ←[1m←[36mSQL (5.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", Tue, 16 Oct 2012 13:52:37 UTC +00:00], ["credit", nil],
 ["end_date", nil], ["headline", ""], ["media", ""], ["start_date", Tue, 16 Oct
2012], ["text", ""], ["thumbnail", nil], ["timeline_id", 1], ["updated_at", Tue,
 16 Oct 2012 13:52:37 UTC +00:00]]
  ←[1m←[35m (88.0ms)←[0m  commit transaction
  Rendered events/create.js.erb (99.0ms)
Completed 500 Internal Server Error in 617ms

ActionView::Template::Error (Called id for nil, which would mistakenly be 4 -- i
f you really wanted the id of nil, use object_id):
    1: $('#new-event').html('<%= escape_javascript( render :partial => "/timelin
es/new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) } )
%>');
    2: $('.notice').html("<p>Event was successfully created.</p>");
    3: $('.notice').show(300);
    4: $('#my-timeline-box').html('<%= escape_javascript( render :partial => "/t
imelines/my_timeline" ) %>');
  app/views/events/create.js.erb:1:in `_app_views_events_create_js_erb___8626901
43_20024148'
  app/controllers/events_controller.rb:59:in `create'


  Rendered C:/Ruby193/lib/ruby/gems/1.9.1/gems/actionpack-3.2.4.rc1/lib/action_d
ispatch/middleware/templates/rescues/_trace.erb (5.0ms)
  Rendered C:/Ruby193/lib/ruby/gems/1.9.1/gems/actionpack-3.2.4.rc1/lib/action_d
ispatch/middleware/templates/rescues/_request_and_response.erb (2.0ms)
  Rendered C:/Ruby193/lib/ruby/gems/1.9.1/gems/actionpack-3.2.4.rc1/lib/action_d
ispatch/middleware/templates/rescues/template_error.erb within rescues/layout (1
000.1ms)

Answer 1

You have :remote => true on the submit button. That’s incorrect. It should be on the form:

<%= form_for(event, :remote => true) do |f| %>