Bootstrap modal, django for loop и модель | одинаковое значение, отображающее ошибку Исправлено

Хотите ли вы, чтобы в модале отображались соответствующие значения цикла или сообщения?

Когда я пытался вывести сообщение о заказе в модалах, он показывал одно и то же сообщение для каждого заказа, что привело меня к пониманию того, что каждый раз, когда мы вызываем один и тот же ID модала, он показывает одно и то же сообщение для каждого заказа,

Я собираюсь объяснить, как я это исправил здесь

  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 %}
Вернуться на верх