Django：Ajaxをモーダルで使用して商品詳細データを表示

Question

私のアプリの使用目的は、ホームページに家具のリストを表示することです。これらの家具にはクイックプレビューボタンがあり、クリックすると詳細情報が表示されます。私はそれのためにajaxを使用しようとしました。 家具のクイックプレビューボタンをクリックすると、クリックした家具スラッグを取得して、その家具の詳細情報を取得します。これまでは、その作業とモーダルが表示されていましたが、内容を表示することはできませんでした。どのようにしてモーダルボディにコンテンツを表示することができますか？ここで

は、私がこれを行う1つのきちんとした方法は、製品の詳細はスニペットのHTMLを使用してrender_to_stringを使用して製品の詳細をHTMLスニペットを送信し、ちょうどモーダルでそのHTMLスニペットを置き換えることです

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

を試してきたものです。

rendered = render_to_string('product_detail_snippet.html', context, 
         context_instance=RequestContext(request)) 
return JsonResponse({'product_snippet': rendered}) 

とAjaxの成功に：

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