Rails - AJAX to for new/create action

Question

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.

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!

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.

timelines/show:

 <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>

timelines/_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 %>

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

events controller:

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

Answer 1

The :remote => true option on render :partial in the timelines/show view is not required.

Instead the form_for in _new_event.html.erb should have the options :remote (this makes the form submit via ajax) and :format (this requests the response be in JavaScript), e.g.:

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