GET data from database to Modal in Django

Question

this file serivces.html has the code used to generate card elements with different id from thedb

{% block content%}
<div class="container-fluid p-lg-5  d-flex justify-content-lg-around   flex-wrap ">
  {% for package in packages %}
  <div class="card" style="width: 18rem; ">
    <div>

      <img class="cardimg" src="{% static '/images/genomic lab final logo1 ( RGB ).png'%}" class="card-img-top" alt="...">
    </div>
    <div class="card-body">
      <h3 class="text-center">{{package.package_name}}  <span class="checkup text-center">Checkup</span></h3>

      <button type="button" class="modalbtn btn btn-primary" data-bs-toggle="modal" data-bs-target="#cardModal">
        more details
       </button>
    </div>
  </div>

 

  
  {% endfor%}
</div>


<<!-- Modal -->
<div class="modal fade content-data" id="cardModal"  data-url="{%url 'Services_data'%}"  tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{details.pkg_name}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <H4>{{details.content}}</H4>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

this is the view.py contain

def services(request):

    packages = Packages.objects.all()
    context = {'packages':packages}

    return render(request, 'base/Services.html',context)

class AjaxHandlerView(View):
    def get(self,request,*args, **kwargs):
        if request.is_ajax():
            details = Details.object.all()
            details_serializers = serializers.serializer('json',details)
            return JsonResponse(details_serializers,safe=False)
        return JsonResponse({'message':'Errrorr'})

and this is the base.js contain the ajax code

$(document).ready(function(){
    $(".modalbtn").on('click',function(){
      $.ajax({
        url: "{% url 'Services_data' %}",
        type:'GET',
        datatype: 'json',
        success: function(){
          $('#cardModal').modal("show");

        },
        error:function()
          {console.log('Errorrrr');
        }
        
        });
  
      });

   
      });

Basically, this code generates cards with different id and when click on the more details button inside a specific card a modal 'popup' should be shown containing details regarding the card

but I have nothing inside the popup any suggestions ??

Answer 1

The reason nothing appears is that your AJAX request doesn't change your modal section and the modal section doesn't contain any information to begin with because the details object is provided by your AJAX-related view, not the services view that creates it.

I would suggest a few fixes:

1. Make your javascript code update the modal HTML, like so:

   success: function(data) {
       $('#cardModal').HTML();
       $('#cardModal').modal("show");
    }

2. Move your inner modal HTML to a separate template file called 'detail-modal.html' (or something similar), but keep the main #cardModal container in your existing template.

3. Instead of using a serializer and JSON in your AJAX class view, use a function view that renders the new modal template, the context being your selected detail object

Finally, your naming convention has a plural Details objects, you should name it as a singular Detail . There also doesn't seem to be a connection between Package and Details , presumably you want some sort of relationship - that would help you a lot.