How to display Ajax response data in Popup?

Question

I have some data in response but I want to display that data in the popup, please let me know how I can display Ajax data in the popup.

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 html file...

{% for a in datas %}
<a href="javascript:void()" class="btn btn-primary" onclick"exampleModal({{a.id)}})" data-url="{% url 'myap:list_single' a.id %}">
  {{a.product_id}}
   </button>
  {% endfor %}

here is my popup code...where I want to dispslay AJAX data...

<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>

here is my AJAX code...

function exampleModal(id){
  $.ajax({
  url: $(this).attr("data-url")
   type: 'get',
   dataType: "HTML" 
   success: function(res) {
   $('.exampleModal').html(res);
   $("#exampleModal").modal("show");
    }
  });
  }

Answer 1

function exampleModal(id){
  $.ajax({
  url: $(this).attr("data-url")
   type: 'get',
   dataType: "HTML" 
   success: function(res) {
     $('#exampleModal .modal-body').html(res); //here is where the response is added to the body element of the modal
     $("#exampleModal").modal("show");
   }
  });
}