How to display Date in popup Modal in Django?

Question

I want to display data in the popup , I have a list on products but when a user clicks on the product id then it should be open in popup according to that product id .

here is my views.py file...

def myview(request):
   datas=TestForm.objects.all
   template_name='test.html'
   context={'datas':datas}
   return render(request, template_name, context)

def myview(request, id):
   display=TestForm.objects.get(pk=id)
   template_name='test.html'
   context={'display':display}
   return render(request, template_name, context)

here is my test.html file...

 {% for a in datas %}
<button type="button" class="btn btn-primary" data-toggle="modal" data- 
  target="#exampleModal">
  {{a.product_id}}
   </button>
  {% endfor %}

  <!-- Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <tr>
     <td>{{datas.name}}</td>
     <td>{{datas.price}}</td>
     <td>{{datas.category}}</td>
    </tr>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Currently, it's displaying the only popup fields on click all products id's, Please let me know how it can display product data according to click product id.

Answer 1

You can solve this issue by making the modal id attribute unique with the pk value.

{% for a in datas %}
<button type="button" class="btn btn-primary" data-toggle="modal" data- 
  target="#exampleModal{{a.pk}}">
  {{a.product_id}}
   </button>
  {% endfor %}

Now in the modal

 {% for a in datas %}
<div class="modal fade" id="exampleModal{{a.pk}}" tabindex="-1" role="dialog" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
.......
{% endfor %}