Django : Ajax를 모달로 사용하여 제품 세부 정보 표시

Question

내 응용 프로그램의 사용 사례는 홈페이지에 가구 목록을 표시하는 것입니다. 모든 가구에 빠른 미리보기 버튼이있어 클릭하면 상세 정보가 표시됩니다. 나는 아약스를 사용하려고했다. 가구 빠른 미리보기 버튼을 클릭하면 내가 클릭 한 가구 슬러그를 가져 와서 가구 세부 정보를 얻습니다. 이 작업까지는 작업과 모달이 표시되지만 내용을 표시 할 수는 없습니다. 어떻게하면 모달 바디에 내용을 표시 할 수 있습니까? 여기

내가 시도 무엇

def ajax_furniture_detail(request): 
    furniture_slug = request.GET.get('slug', None) 
    qs = Furniture.objects.get(slug=furniture_slug) 
    cart_obj, new_obj = Cart.objects.new_or_get(request) 
    context = { 
    'furniture': model_to_dict(qs), 
    'cart': model_to_dict(cart_obj), 
    'status': 'ok' 
    } 
    return JsonResponse(context) 

{% block content %} 
    {% include 'furnitures/furnitures_home.html'%} 
{% endblock content %} 
{% block js %} 
    {{ block.super }} 
    <script> 
    $(document).ready(function(){ 
     $('.quick-view-button').click(function() { 
      var _this = $(this); 
      var slug = _this.attr("data-slug"); 
      $.ajax({ 
      url: '/ajax/furniture', 
      type: "get", 
      data: {'slug': slug}, 
      success: function(data) { 
       $('#product-quick-view-modal').modal('show'); 
       $('#product-quick-view-modal').find('.modal-body').html(data.html); 
      }, 
      error: function(err) { 
       console.log('error', err); 
      } 
      }) 
     }) 
    }); 
    </script> 
{% endblock js %} 


furnitures_home.html 

{% load static %} 
<div class="furnitures" id="content"> 
    {% for furniture in furnitures %} 
     {% if forloop.first %}<div class="row products">{% endif %} 
     <div class="col-md-4 col-sm-3"> 
     <div class="product"> 
      <div class="image" style="height: 205px;"> 
      <div class="quick-view-button" data-slug={{ furniture.slug }}> 
       <a href="#" data-toggle="modal" data-target="#product-quick-view-modal" class="btn btn-default btn-sm">Quick view</a> 
      </div> 
      {% endif %} 
      </div> 
     </div> 
     </div> 
    {% endfor %} 
</div> 

<div class="modal fade" id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-body"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <p>Hello</p> 
      <p>{{furniture.name}}</p> 
     </div> 
     </div> 
    </div> 
    <!--/.modal-dialog--> 
</div> 

Answer 1

이렇게하는 한 깔끔한 방법은 제품 세부 사항에 대한 미리보기의 HTML을 사용하고 render_to_string를 사용하여 제품 세부 HTML 스 니펫 보내고 단지 모달에서 그 HTML 코드를 대체하는 것입니다

.

$('#product-quick-view-modal').find('.modal-body').html(data.product_snippet);