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

{% block content%}
<div >
  {% for package in packages %}
  <div  style="width: 18rem; ">
    <div>

      <img  src="{% static '/images/genomic lab final logo1 ( RGB ).png'%}"  alt="...">
    </div>
    <div >
      <h3 >{{package.package_name}}  <span >Checkup</span></h3>

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

 

  
  {% endfor%}
</div>


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

      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
        <button type="button" >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 ??

CodePudding user response：

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.