Edit an object Modal Ruby on Rails

Question

Yoo, I'm trying to make a modal with which I can edit a Note.

But when I click on the edit button. It opens the modal but it only display the first note's infos even clicking on the others note it always redirects me to edit the first note of the table.

I can't seem to figure it out.

Here's my index view

  <table class="table mt-5">
    <thead>
      <tr>
        <th><p>Titulo</p></th>
        <th><p>Conteudo</p></th>
        <th><p>Data</p></th>
        <th><p>Prioridade</p></th>
        <th></th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <% current_user.notes.each do |n| %>
      <tr>
        <td><%= n.title %></td>
        <td><%= n.content %></td>
        <td><%= n.date %></td>
        <td><%= n.priority %></td>
        <td> <%= link_to "Editar", edit_note_path(n), class: "btn btn-outline-warning",data: { toggle: "modal", target: "#EditNote", whatever: "@getbootstrap"} %></td>
        <td><%= link_to "Apagar", note_path(n), method: :delete, data: { confirm: 'Tem certeza ?' }, class: "btn btn-outline-danger" %>
        </td>
      </tr>
      <div class="modal fade" id="EditNote"  tabindex="-1" role="dialog" aria-labelledby="EditingNote"  aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="CreatingNote">Editar Anotação</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
            <div class="modal-body">
              <%= simple_form_for n do |f| %>
                  <%= f.input :title, label: "Title", placeholder: "Title" %>
                  <%= f.input :content, placeholder: "Escreve aqui" %>
                  <%= f.input :date %>
                  <%= f.input :priority, :collection => %w[Baixa Média Alta] %>
            </div>
            <div class="modal-footer">
                <%= f.submit "Editar", class: "btn btn-warning btn-block" %>
              <% end %>
            </div>
          </div>
        </div>
      </div>
      <% end %>
    </tbody>
  </table>

Here's my Controller

class NotesController < ApplicationController
  before_action :set_note, only: %w[edit update destroy]

  def index
    @notes = Note.all
    @note = Note.new
  end

  def new
    @note = Note.new
  end

  def create
    @note = Note.new(note_params)
    @note.user = current_user
    if @note.save
      redirect_to notes_path
      flash[:alert] = "Anotação salva"
    else
      flash[:alert] = "Tenta de novo"
      render :new
    end
  end

  def edit
  end

  def update
    @note.update(note_params)
    redirect_to notes_path
  end

  def destroy
    @note.destroy
    redirect_to notes_path
  end

  private

  def set_note
    @note = Note.find(params[:id])
  end

  def note_params
    params.require(:note).permit(:title, :content, :date, :priority, :user_id)
  end
end

Answer 1

Every modal has the id #EditNote. And every edit link has:

data: { toggle: "modal", target: "#EditNote", whatever: "@getbootstrap"}

So, I suppose the click - regardless of which link you're clicking - is always showing the first modal with the id #EditNote which is always the modal for the first note.

Perhaps try:

data: { toggle: "modal", target: "#editNote#{n.id}", whatever: "@getbootstrap"}

...and:

<div class="modal fade" id="editNote#{n.id}"  tabindex="-1" role="dialog" aria-labelledby="EditingNote"  aria-hidden="true">

So that every modal has a unique id and every link points at that unique id.

BTW, it seems using a link_to isn't really necessary since you're not doing anything in the controller action, but it's probably not doing any harm either. It's just an unnecessary request-response cycle.