Django templating for loop работает для первого элемента

Не могу понять, что я делаю неправильно!!! Я создал шаблон, который имеет вид и в этом виде я создал контекстный словарь, который содержит отфильтрованные заказы для определенного пользователя, но по какой-то причине в шаблоне я создал цикл для деталей заказа с кнопкой, которая позволяет пользователю увидеть больше деталей заказа, но она работает только для первого элемента заказа

моя модель заказа

<

Мое мнение: 

@login_required(login_url="login")
 def user_Orders(request):
    user = request.user.customer
    orders = Order.objects.filter(customer=user).filter(complete=True)
    return render(request, 'shop/orders.html', {'orders':orders, "user":user})

мой шаблон

<h3 style="color: #0457ae;padding-left: 40px;"><u>YOUR ORDERS</u></h3>
  {% for order in orders %}
      <p>Order total: ${{order.total}}</p>
      <p>Status: Paid</p>
      <p>Transaction id/tracking number :<span id="trans_id">&nbsp;{{order.transaction_id}}</span></p>
      <button id="myBtn" class="btn btn-outline-primary">more details</button>
      <div id="myModal" class="modal">
          <!-- Modal content -->
          <div class="modal-content">
              <span class="close">&times;</span>
              <center><u>More order details</u></center>
              <p>shipping to :{{order.shipping}}</p>
              <p>Estimated delivery: {{order.delivery}}</p>
              <p>phone: {{order.phone}}</p>
          </div>
        </div>
    {% endfor %}
 </div>

На рисунках ниже показан вывод ... Я хочу, чтобы всплывающее окно появлялось для каждого заказа

Неправильно, что все кнопки имеют одинаковый id, а также они должны иметь более подходящие имена. Так, если вы измените id с myBtn на detailBtn{{order.id}}, а id для модала на detailModal{{order.id}}, и отредактируете javascript, вы можете сделать так, что клик по detailBtnX изменит класс detailModalX (измените x на число)

Каждому модалу нужен уникальный id, как сказал @Pablo Estevez.
Поэтому убедитесь, что у вас есть уникальное значение в вашем models.py (обычно id), которое вы указали в контексте вашего представления.

Имея уникальный id, вы можете сделать что-то вроде:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{something.id}}Modal">

Чтобы открыть модальное окно.

Код модала будет выглядеть примерно так (с использованием bootstrap):

<div class="modal fade" id="{{something.id}}Modal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
                      <div class="modal-dialog  modal-xl" style="width:100%" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="detailsModalLabel">Something here</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <h6>Body with text</h6>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>

Надеюсь, это поможет.

Вернуться на верх