使用按钮的 id 在 Rails 中呈现部分

Question

我有一个视图，其中显示用户创建的所有事件的列表的部分视图，旁边有一个编辑链接。我想要发生的是，当用户单击“编辑”时，下面会出现一个部分表单，以便您可以编辑该事件。

为简单起见，我设法让按钮的 id 与事件的 id 相同。所以，我想要发生的是，当单击 id 为 2 的按钮时，下面会出现一个表单来编辑 id 为 2 的事件。

我认为我需要进行某种 AJAX 调用来呈现部分内容，但我不知道该怎么做。任何帮助将不胜感激，谢谢。

到目前为止我所拥有的是（所有的编辑按钮都有一个 btn-info 类）：

$(document).ready(function(){
    $('.btn-info').click(function(e){
        e.preventDefault;
        var btnID = this.id;
        //something here to get the partial to render 
    });
}); 

我可以使用类似下面的方法来调用部分吗？我知道这不起作用，但可能会更好地了解我想要实现的目标：

$("#events").html("<%= escape_javascript render( edit_event_path(btnID) ) %>");

更新：根据要求，控制器和视图：

事件控制器上的编辑操作：

def edit
    @event = Event.find(params[:id])

    respond_to do |format|
      format.html
      format.js
    end
end

项目显示完整的带有粘贴 javascript 的视图：

<script>
    $(document).ready(function(){
    $('#new-event-button').click(function(e){
        e.preventDefault();
        $('#edit-events').hide();
        $('#delete-events').hide();
        $('#new-event').slideDown(function(){
            $('html, body').animate({
            scrollTop: $(document).height()-$(window).height()},200,"linear"
            );
        });
    });
    $('#edit-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#delete-events').hide();
        $('#edit-events').slideDown(function(){
            $('html, body').animate({
            scrollTop: $(document).height()-$(window).height()},200,"linear"
            );
        });
    });
    $('#delete-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#edit-events').hide();
        $('#delete-events').slideDown(function(){
            $('html, body').animate({
            scrollTop: $(document).height()-$(window).height()},200,"linear"
            );
        });
    });
    $('.btn-info').click(function(e){
        e.preventDefault;
        $('#events-forms').after('<%= escape_javascript( render :partial => "eventform", :locals => { :event => @event } ) %>');
    });
});

</script>

<div class="content-box timeline-box">
<div id="my-timeline"></div><br /><br />
<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) } %>
    </div>

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

    <div id="delete-events">
        <%= render :partial => "delete_events", :locals => { :events => current_user.events } %>        
    </div>
</div>

以及编辑事件的表单（'_eventform.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 :start_date %><br />
    <%= f.date_select :start_date %>
  </div>
  <div class="field">
    <%= f.label :headline %><br />
    <%= f.text_area :headline %>
  </div>
  <div class="field">
    <%= f.label :text %><br />
    <%= f.text_area :text %>
  </div>
  <div class="field">
    <%= f.label :media %><br />
    <%= f.text_area :media %>
  </div>
  <div class="field">
    <%= f.label :caption %><br />
    <%= f.text_area :caption %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Answer 1

这是我在部分列表中要做的：

<% @events.each do |event| %>
   <div id="event_<%= event.id">
      #... whatever event display code you use
      <%= link_to "edit", edit_event_path(event), :class => '.btn-info', :remote => true %>
   </div>
<% end %>

在您的控制器中：

class EventsController < ApplicationController

  def edit
    @event = Event.find(params[:id])
    #.. whatever else you currently have here

    respond_to do |format|
      format.html
      format.js
    end
  end

end

然后，在新视图中 (app/views/events/edit.js.erb)：

$('#event_<%= @event.id %>').after('<%= escape_javascript( render :partial => "edit_events", :locals => { :event => @event } ) %>');