title: Rails - AJAX to for new/create action
body: <p>I've got a timeline with events partials on it so that you can CRUD events directly on the timeline page. I've got it working so that you can delete an event, and the delete partial refreshes along with the timeline, without the page refreshing.</p>
  
  <p>But I can't get it working for a new event, or to edit one. Please can someone help me figure out where I am going wrong? Thanks!</p>
  
  <p>I've put the code for a new event here, as I'm sure between the new and delete, I can work out how to sort the editing.</p>
  
  <p>timelines/show:</p>
  
  <pre><code> &lt;div id="show-timeline"&gt;
     &lt;%= render :partial =&gt; "show_timeline" %&gt;
   &lt;/div&gt;
  
      &lt;div id="my-timeline-box"&gt;
          &lt;%= render :partial =&gt; "my_timeline" %&gt;
      &lt;/div&gt;
  
  &lt;div id="new-event"&gt;
      &lt;%= render :partial =&gt; "new_event", :locals =&gt; { :event =&gt; Event.new(:timeline_id=&gt;@timeline.id) }, :remote =&gt; true %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>timelines/_new_event.html.erb:</p>
  
  <pre><code>&lt;%= form_for(event) do |f| %&gt;
    &lt;% if event.errors.any? %&gt;
      &lt;div id="error_explanation"&gt;
        &lt;h2&gt;&lt;%= pluralize(event.errors.count, "error") %&gt; prohibited this event from being saved:&lt;/h2&gt;
  
        &lt;ul&gt;
        &lt;% event.errors.full_messages.each do |msg| %&gt;
          &lt;li&gt;&lt;%= msg %&gt;&lt;/li&gt;
        &lt;% end %&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;% end %&gt;
  
    &lt;%=f.hidden_field 'timeline_id', :value =&gt; current_user.timeline.id %&gt;
    &lt;div class="field"&gt;
      &lt;%= f.label :date %&gt;&lt;br /&gt;
      &lt;%= f.date_select :start_date, :order =&gt; [:day, :month, :year], :start_year =&gt; 1800 %&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;%= f.label :title %&gt;&lt;br /&gt;
      &lt;%= f.text_field :headline, :size =&gt; 50 %&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;%= f.label :event_description %&gt;&lt;br /&gt;
      &lt;%= f.text_area :text, :size =&gt; "47x4" %&gt;
    &lt;/div&gt;
    &lt;%= check_box_tag "blockCheck", :value =&gt; "1", :checked =&gt; false %&gt;
    &lt;div class="field" id="media_box"&gt;
      &lt;%= f.label :media %&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span&gt;Please paste a URL here&lt;/span&gt;&lt;br /&gt;
      &lt;%= f.text_field :media, :size =&gt; 50 %&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;%= f.label :media_description %&gt;&lt;br /&gt;
      &lt;%= f.text_area :caption, :size =&gt; "47x3" %&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;%= f.submit 'Create Event', :class =&gt; "btn btn-success"  %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>events/create.js.erb:</p>
  
  <pre><code>$('#new-event').html('&lt;%= escape_javascript( render :partial =&gt; "/timelines/new_event", :locals =&gt; { :event =&gt; Event.new(:timeline_id=&gt;@timeline.id) } ) %&gt;');
  $('.notice').html("&lt;p&gt;Event was successfully created.&lt;/p&gt;");
  $('.notice').show(300);
  $('#my-timeline-box').html('&lt;%= escape_javascript( render :partial =&gt; "/timelines/my_timeline" ) %&gt;');
  $('#show-timeline').html('&lt;%= escape_javascript( render :partial =&gt; "/timelines/show_timeline" ) %&gt;');
  </code></pre>
  
  <p>events controller:</p>
  
  <pre><code>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
  </code></pre>