在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之間似乎也沒有聯系，大概你想要某種關系 - 這會對你有很大幫助。