Bootstrap modal，django for 循环和模型 |相同值显示错误已修复

Question

您希望模态显示相应的循环值或消息吗？

当我尝试在模态中打印订单消息时，它为每个订单显示相同的消息，这让我意识到每次我们调用相同的模态 ID 时，它为每个订单显示相同的消息，

Answer 1

我将解释我是如何在这里修复它的

1. 在按钮（用于打开模式）

      data-target="#exampleModal"
   
       to
   
       data-target="#exampleModal{{ forloop.counter }}"
   

2. 在模态

   id="exampleModal"
   
    to 
   
   id="exampleModal{{ forloop.counter }}"
   

   例子 ：

                <tbody>
                 {% for Order in orders %}
                 <tr>
               
                   <td style="width:120px;">{{Order.order_date}}</td>
                   <td>{{Order.customer}}</td>
                   <td>{{Order.customer.customer_phone}}</td>
                   <td>{{Order.total_items}}</td>
                   <td>{{Order.total_amount}}</td>
                 
                   <td>
                       {% comment %} <div class="hovertext" data-hover="{{Order.order_message}}">{{Order.order_message|truncatechars:20}}</div> {% endcomment %}
                       {% comment %} view order button and while clicking this buttonn show message in pop up {% endcomment %}
                       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal{{ forloop.counter }}">
                           View Order
                         </button>
                         
                         <!-- Modal -->
                         <div class="modal fade bd-example-modal-lg" id="exampleModal{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                           <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <h5 class="modal-title" id="exampleModalLongTitle">Order Message</h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                   <span aria-hidden="true">&times;</span>
                                 </button>
                               </div>
                               <div class="modal-body" style="color:dark;">
                                 {% comment %} oder make in formated way {% endcomment %}
                                 {{Order.order_message}}
                               </div>  
                             </div>
                           </div>
                         </div>
   
                     </td>
                 </tr>
                 
                 {% endfor %}