CBV（ListView）を使用してAjaxレスポンスDjangoでHTMLフラグメントを更新する

Question

私は、データベースからのすべてのオブジェクトを含むベースリストビュー（cbv .all（）クエリで示されているように）を含むホームページを持っています。私がしたかったのは検索フィルターを入れることだったので、後で再利用できるように別の "list.html"フラグメントに分離することをお勧めします。現在、私はcbvに情報を送信するajax呼び出しを持っており、戻り値はlist.htmlフラグメントへのレンダリングです。しかし、私がホームページにアクセスすると、ページはレンダリングされません。

ヘルプまたはアドバイスをいただければ幸いです。ありがとうございました。

urls.pyここ

urlpatterns = [ 
url(r'^$', exp_view.DrugListView.as_view() , name = 'drug_list')] 

である私のCBVテンプレート：ここ

views.py

class DrugListView(ListView): 
context_object_name = 'drugs' 
model = Drug 
template_name = 'expirations/drug_list.html' 

def get(self, request): 
    if self.request.is_ajax(): 
     text_to_search = self.request.GET.get('searchText') 
     print(text_to_search) 
     return render(request, "expirations/list.html", {'drug':Drug.objects.filter(name__contains = text_to_search).order_by('name')}) 
    else: 
     return render(request, "expirations/list.html", {'drug':Drug.objects.all().order_by('name')}) 

がある drug_list.html

ここでは

{% extends 'expirations/index.html' %} 

{% block content %} 

{% include 'expirations/list.html' %} 

{% endblock %} 
{% block javascript %} 
<script> 
$(document).ready(function(){ 
    var input = $("#searchText") 
    input.keyup(function() { 
    $.ajax({ 
     type: "GET", 
     url: "{% url 'drug_list' %}", 
     data: {'searchText' : input.val()}, 
     success: function(data){ 
     $("#list_view").load("expirations/list.html") 
     } 
    }) 
    }); 
}) 
</script> 
{% endblock %} 

するlist.html 次のとおりです。

{% for drug in drugs %} 
    <div class = '.col-sm-12'> 
     <ul class = 'list-group'> 
      <li class = "list-group-item" > 
       <span class = "badge">First Expiration: {{ drug.early_exp|date:"l M d Y" }}</span> 
       <a href="{% url 'drug_detail' pk=drug.pk %}">{{ drug.name }}</a> 
       {% regroup drug.expiration_dates.all by facility as facility_list %} 
       {% for x in facility_list %} 
       <span class="label label-info">{{ x.grouper }}</span> 
       {% endfor %} 
      </li> 
     </ul> 
    </div> 
{% endfor %} 

Answer 1

あなたはsuccessコールバックで何をする必要があるのか​​誤解しました。

この関数はDjangoテンプレートにアクセスできません。しかし、これは必要ではありません.Djangoはすでにdataパラメータで利用可能な応答でフラグメントを送信しているためです。既存のページに挿入するだけです。

そのためにはコンテナが必要です。

{% block content %} 

<div id="list_contents"> 
    {% include 'expirations/list.html' %} 
</div> 

{% endblock %} 

、今あなたの成功の機能が使用できます：

success: function(data) { 
    $("#list_contents").html(data) 
} 

Answer 2

私はそれがこのように動作するとは思いません。 AjaxコールとCBVについてはexample in the docsをご覧ください。

次に、フィルタリングされた新しいデータ（html形式）をajax呼び出しに返し、replace JSを使用して成功関数のhtmlを返す必要があります。

Answer 3

ダニエルローズマンは間違いである、ここで、パズルを解く助け含ま周りのdiv要素があるように、あなたはあなたのdrug_list.htmlを変更する必要があります更新されたコード：

views.py：一般的なテンプレートのデフォルトリストビューを含めるようにif/else文を更新しました。また、代わりに「薬」

class DrugListView(ListView): 
    context_object_name = 'drugs' 
    model = Drug 
    template_name = 'expirations/drug_list.html' 

    def get(self, request): 
     if self.request.is_ajax(): 
      text_to_search = self.request.GET.get('searchText') 
      print(text_to_search) 
      return render(request, "expirations/list.html", {'drugs':Drug.objects.filter(name__contains = text_to_search).order_by('name')}) 
     else: 
      return render(request, "expirations/drug_list.html", {'drugs':Drug.objects.all().order_by('name')}) 

drug_list.htmlのコンテキスト名「薬」を追加しました：ダニエルによって示唆されているように、成功コールバック関数の負荷のhtmlを変更しました。

{% extends 'expirations/index.html' %} 

{% block content %} 
    <div id = 'list_view'> 
    {% include 'expirations/list.html' %} 
    </div> 
{% endblock %} 
{% block javascript %} 
<script> 
$(document).ready(function(){ 
    var input = $("#searchText") 
    input.keyup(function() { 
    $.ajax({ 
     type: "GET", 
     url: "{% url 'drug_list' %}", 
     data: {'searchText' : input.val()}, 
     success: function(data){ 
     $("#list_view").html(data) 
     } 
    }) 
    }); 
}) 
</script> 
{% endblock %}