Can't really find out what am doing wrongly !! I created a template that has a view and in that view I created a context dictionary which contain filtered orders for a specific user but for some reason in the template I created a loop for order details with a button which allows the user to see more order details but its working only for the first order item

my order model

class Order(models.Model):
    customer = models.ForeignKey(Customer, on_delete=models.CASCADE, null=True, blank=True)
    date_ordered = models.DateTimeField(auto_now_add=True)
    complete = models.BooleanField(default=False)
    transaction_id = models.CharField(max_length=100, null=True)
    total = models.FloatField(max_length=15,null=True, blank=True)
    shipping = models.CharField(max_length=50, blank=True, null=True)
    phone = models.CharField(max_length=15, blank=True, null=True)
    date_ordered = models.DateTimeField(auto_now_add=True)
    delivery = models.CharField(max_length=200, default="3-20 business days", blank=True, null=True)
    def __str__(self):
        return str(self.id)

my view:

@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})

my template

<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" >more details</button>
      <div id="myModal" >
          <!-- Modal content -->
          <div >
              <span >&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>

the images below shows the output ... I want the popup to happen for each order but its working for the first one only

[https://i.stack.imgur.com/2HH3a.png]

[https://i.stack.imgur.com/V1AGj.png]

CodePudding user response：

Its bad practice that all the buttons have the same id, and also they should have better mames. So, if you change the id from myBtn to detailBtn{{order.id}} and the id for the modal to detailModal{{order.id}}, and edit the javascript you could do that clicking in detailBtnX change the class of detailModalX (change the x for the number)

CodePudding user response：

Every modal needs a unique id, like @Pablo Estevez said.
So make sure you have a unique value in your models.py, (usually an id), that you have given in the context of your view.

With a unique id, you can do something like:

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

To open a modal.

The modal code would look something like this (using bootstrap):

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

Hope this helps.