0

ユーザーが作成したすべてのイベントのリストを部分的に表示するビューがあり、その横に編集リンクがあります。私が望んでいるのは、ユーザーが「編集」をクリックすると、そのイベントを編集できるようにフォームの部分が下に表示されることです。

簡単にするために、ボタンの 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 %>
4

1 に答える 1

0

リスト部分で行うことは次のとおりです。

<% @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 } ) %>');
于 2012-10-15T20:46:23.380 に答える