Edit Form in a Modal with nested resources

Question

In my SCREEN show view i render the comments

<%= render @screen.comments.order("created_at DESC") %>

that partial contains the comment AND an Edit Link which points to a modal which is also in that partial.

<%= link_to "Edit", '#EditComment', 'data-toggle' => 'modal' %>

The modal looks like this:

<!-- Comment Edit Modal -->
<% if can? :update, Comment %>
    <div class="modal fade" id="EditComment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog edit_scr_modal">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Edit your Comment</h4>
          </div>
          <%= form_for [@screen, comment] do |f| %>

            <div class="modal-body">
              <div class="form descr_area">
                <label>Comment:</label><br>
                <%= f.text_area :body, :rows => "3" %>
              </div>
            </div>
            <div class="modal-footer">
              <%= button_tag(type: "submit", class: "btn") do %>
                  <i class="fa fa-check"></i> Edit Comment
              <% end %>
            </div>

          <% end %>
        </div>
      </div>
    </div>
<% end %>

Here's the Problem..

Although the Html outputted by this is targeting 2 different Comment ID's(2 Different Comments):

<form accept-charset="UTF-8" action="/s/7-testing-one-two-three/comments/20" class="edit_comment" id="edit_comment_20" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" />
  <input name="_method" type="hidden" value="patch" />
  <input name="authenticity_token" type="hidden" value="0wcpual8qoJ1lzktwbNFPRikq/Cq4WCnyXi8IjIDitc=" />
</div>

and

<form accept-charset="UTF-8" action="/s/7-testing-one-two-three/comments/11" class="edit_comment" id="edit_comment_11" method="post">
<div style="margin:0;padding:0;display:inline">
  <input name="utf8" type="hidden" value="&#x2713;" />
  <input name="_method" type="hidden" value="patch" /><input name="authenticity_token" type="hidden" value="0wcpual8qoJ1lzktwbNFPRikq/Cq4WCnyXi8IjIDitc=" />
</div>

Upon clicking the Edit link it Displays the Modal with the most recent comment(created_at DESC), if i click on another comment it just shows the first one again.

If i create a new comment, it will be again on all modals.

So i think it has something to do with the partial rendering when passing the .order(created_at DESC)...

What am i missing here??

Routes:

  resources :screens, :path => 's' do
    resources :comments
  end

CommentsController:

  def edit
    @screen = Screen.find(params[:screen_id])
    @comment = current_user.comments.find(params[:id])
  end

  def create
    @screen = Screen.find(params[:screen_id])
    @comment = current_user.comments.build(comment_params)
    @comment.screen_id = @screen.id
    respond_to do |format|
      if @comment.save
        @comment.create_activity :create, owner: current_user, recipient: @comment.screen.user
        format.html { redirect_to @screen, notice: 'Comment was successfully created.' }
      else
        format.html { redirect_to @screen }
      end
    end
  end

  def update
    respond_to do |format|
      if @comment.update(comment_params)
        format.html { redirect_to @comment.screen, notice: 'Comment was successfully updated.' }
      else
        format.html { redirect_to @screen }
      end
    end
  end

Answer 1

You are sending all the edit links to HTML element with id = EditComment. All your modals have the same id i.e., EditComment. So, It will always pick the first modal as that would be the first match.

You would need to change the main div of modal to have different id's for different comments. For example:

<div class="modal fade" id="EditComment_<%= comment.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

And then update your link as below,

<%= link_to "Edit", "#EditComment_#{comment.id}", 'data-toggle' => 'modal' %>