RoR中点击Rent按钮后如何在Partial中传递current_item ID

Hey there, let's fix that issue where clicking "Rent" always pulls up the latest item instead of the one you actually clicked on. The root problem here is duplicate modal IDs in your DOM.

Why this is happening #

Bootstrap uses the data-target attribute to locate which modal to trigger. Right now, every modal you render in your loop has the same id="rentModal". Browsers don't handle duplicate IDs well—they'll only recognize the last one rendered, which is why you're always getting the latest item.

Here's how to fix it #

We need to give each modal a unique ID tied to the item it belongs to, then make sure the corresponding "Rent" button points to that unique ID.

1. Update _itemviewer.html.erb to use unique modal targets

   <% @items.each_with_index do |item, j| %>
     <% if item.user != current_user %>
       <!-- Use item's ID to create a unique data-target -->
       <%= link_to 'Rent', '#', class: 'btn btn-success', "data-toggle" => "modal", "data-target" => "#rentModal_#{item.id}"%>
       <!-- Pass the unique modal ID to the partial -->
       <%= render partial: "layouts/rent_modal", locals: {current_item: item, modal_id: "rentModal_#{item.id}" } %>
     <% end %>
   <% end %>
   

2. Modify _rent_modal.html.erb to use the unique ID
   Make sure your modal has the full Bootstrap structure (you might have missed this before) and uses the passed-in modal_id:

   <div class="modal fade" id="<%= modal_id %>" tabindex="-1" role="dialog" aria-labelledby="<%= modal_id %>Label" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="<%= modal_id %>Label">Rent <%= current_item.name %></h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <%= simple_form_for [current_item, @acquiretime] do |f| %>
             <div class="add_item_form">
               <%= f.input :required_time, as: :date, html5: true %>
               <%= f.input :return_time, as: :date, html5: true %>
               <%= f.hidden_field :user_id, value: current_user.id %>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               <%= f.submit 'Add Item', class: 'btn btn-primary' %>
             </div>
           <% end %>
         </div>
       </div>
     </div>
   </div>
   

What this does #

Each "Rent" button now points to a modal that's uniquely tied to the item it's next to. When you click the button, Bootstrap will find the correct modal with the matching unique ID, and the current_item inside that modal will be the one you intended to rent.

内容的提问来源于stack exchange，提问作者Sujan Joshi