在Django中从数据库获取数据到模态

Question

此文件serivces.html包含用于从 thedb 生成具有不同 id 的卡片元素的代码

{% 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 %}

这是view.py包含

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

这是包含 ajax 代码的base.js

$(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');
        }
        
        });
  
      });

   
      });

基本上，此代码生成具有不同 ID 的卡片，当单击特定卡片内的更多详细信息按钮时，应显示包含有关卡片详细信息的模式“弹出窗口”

但我在弹出窗口中没有任何建议？？

Answer 1

没有出现的原因是您的 AJAX 请求不会更改您的模式部分，并且模式部分不包含任何开始的信息，因为details对象是由您的 AJAX 相关视图提供的，而不是创建它的服务视图。

我会建议一些修复：

1. 让您的 javascript 代码更新模态 HTML，如下所示：

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

2. 将您的内部模态 HTML 移动到名为“detail-modal.html”（或类似文件）的单独模板文件中，但将主#cardModal容器保留在现有模板中。

3. 不要在 AJAX 类视图中使用序列化程序和 JSON，而是使用呈现新模式模板的函数视图，上下文是您选择的详细对象

最后，您的命名约定具有复数Details对象，您应该将其命名为单数Detail 。 Package和Details之间似乎也没有联系，大概你想要某种关系 - 这会对你有很大帮助。