ajaxで結果をフィルタリングするときのhtmlページの一部をロード

Question

3つのチェックボックスを使用して検索結果をフィルタリングしたいと思います。結果はid=posts_results

<div class="checkbox"> 
     <label><input type="checkbox" id="id1" class="typePost" value="En groupe"> val1 </label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" id="id2" class="typePost" value="En groupe"> val2 </label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" id="id3" class="typePost" value="A domicile"> val3</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" id="id4" class="typePost" value="Par webcam"> val4</label> 
    </div> 

    <div id="posts_results"> 

      {% include 'posts/posts_results.html' %} 

    </div> 


    <script> 
     $('.typePost').change(function (request, response) { 

     var v1=$('#id1').is(":checked")? 1:0; 
     var V2=$('#id2').is(":checked")? 1:0; 
     var V3=$('#id3').is(":checked")? 1:0; 
     var v4=$('#id4').is(":checked")? 1:0; 
     $.ajax({ 

      url: '/posts/type_lesson/', 
      dataType: 'json', 
      type: "GET", 
      data: { 
       group: groupChecked, 
       webcam: webcamChecked, 
       home: homeChecked, 
       move: moveChecked, 
       distance: distance, 
      }, 
      success: function (object_list) { 

       $('#posts_results').load("my_page.html", object_list); 
       alert('after') 
      } 

     }); 

    }); 
    <script> 

でdivの中で提示され、これは私のURLです：

url(r'^filter/$', views.filter, name='filter_type_lesson'), 

、これが私の見解です：

def filter(request): 
if request.method=='GET': 

    #as an exemple I'll send all posts 
    data= PostFullSerializer(Post.objects.all(), many=True) 
    return JsonResponse(data.data, safe=False) 

フィルタ機能に応じていくつかのフィルタをexcute jsonはデータを送信し、フィルタリングされた投稿をシリアル化して返信します（この場合はすべての投稿を送信します）。

結果は、idが "posts_results"のdivのforloopを使用して表示され、HTMLはファイルposts_results.htmlに表示されます。

JSONデータが送信されますが、AJAXの成功の機能が更新またはロードのdiv

をし、

Answer 1

に滞在することも可能であるしない私は離れて、生のPOSTデータから宿泊したいできるだけ多くとされていますフォームAPIを大量に動かすようにしてください。あなたは既に持っているものをより安全な方法でたくさん少ないコードで行うことができます。

モデル内のBooleanFieldsに4つのBooleanFieldsという名前のフォームを作成します。 label変数を使用してHTMLに表示する方法を上書きすることができます。

class TheForm(forms.Form): 
    my_field = forms.BooleanField(required=False, label="What I want it to say") 
    my_field2 = forms.BooleanField(required=False, label="What I want it to say 2", help_text="Something else") 
    my_field3 = forms.BooleanField(required=False, label="What I want it to say 3", help_text="Something else") 

出力<form class="my_form">{% csrf_token %}{{form.as_table}}</form>

として、次のようにJSでそれを提出してください：フォームが送信され、検証された場合

$('.my_form input[type=checkbox]').change(function(e){ 
    e.preventDefault() 
    $.post('module/filer/', $('.my_form').serialize(), function(data) { 
     // Handle data 
    }); 
}); 

cleaned_data属性を取ると、この

models = Post.objets.filter(**form.cleaned_data) 

のようなあなたのモデルにフィルタを適用

これは、フォームフィールドと名前付きのthあなたのモデルのフィールドと同じです。 Post.objects.filter(my_field=True, my_field2=True, my_field3=False)と同じことです。それで、あなたはそれで何でもしたいことができます。私はこのすべてを行うにはFormViewを使用します。

class MyView(FormView): 
    form_class = TheForm 

    def form_valid(self, form): 
     models = Post.objets.filter(**form.cleaned_data) 
     data= PostFullSerializer(data, many=True) 
     return JsonResponse(data.data, safe=False) 

は今、何がそれ自体でのdivを更新するつもりはありません。これは、HTMLが最初に要求されたときにのみ作成されます。あなたの成功の機能では、次のように手動で要素を追加する必要があります：あなたはまた、単にとAjaxによるレンダリングされたHTMLを過ぎ$('#post_results').html(data);を行うことができます

$('.my_form input[type=checkbox]').change(function(e){ 
    e.preventDefault() 
    $.post('module/filer/', $('.my_form').serialize(), function(data) { 
     var post_results = $('#post_results').html(''); // Clear out old html 
     $.each(data, function(item) { 
      // Create new divs from ajax data and append it to main div 
      var div = $('<div>'); 
      div.append($('<div>').html(item.my_field)); 
      div.append($('<div>').html(item.my_field2).addClass('something')); 
      div.appendTo(post_results); 
     }); 
    }); 
}); 

。 jsonの応答を呼び出す代わりに、FormViewでself.render_to_responseと呼ぶでしょう。

Answer 2

多分、あなたのビューでテンプレートをレンダリングして、レンダリングしたデータをdivにロードすることができます。

あなたposts/posts_results.htmlがあると仮定すると、いくつかのように：、あなたがテンプレートをレンダリングし、応答、すなわち（ベース国連あなたにHTMLコンテンツを追加することができますが、それぞれのアクションを行う瞬間に、あなたのビューで

<ul> 
{% for post in posts %} 
    <li> Post: {{post.name }}/Author: {{post.author}}/Date: {{post.created_at}}</li> 
{% endid %} 
<ul> 

、現在のコード）：あなたのJSで次に

def filter(request): 
    if request.method=='GET': 
     json_data = { 
      "success": False, 
      "message": "Some message", 
      "result": "some result", 
     } 
     posts = Post.object.all() 
     template = "posts/posts_results.html" 

     things_to_render_in_your_template = { 
      "posts": posts, # you can add other objects that you need to render in your template 
     } 

     my_html = get_template(template) 
     html_content = my_html.render(things_to_render_in_your_template) 

     # here the html content rendered is added to your response 
     json_data["html_content"] = html_content 
     json_data["success"] = True 
     return JsonResponse(json_data) 

、モメントでajsx応答をチェックするためには、あなたのdivにレンダリングされたコンテンツを追加することができます

$.ajax({ 

     url: '/posts/type_lesson/', 
     dataType: 'json', 
     type: "GET", 
     data: { 
      group: groupChecked, 
      webcam: webcamChecked, 
      home: homeChecked, 
      move: moveChecked, 
      distance: distance, 
     }, 
     success: function (response) { 
      # response is the json returned from the view, each key defined in your json_data dict in the view, is a key here too 

      # now insert the rendered content in the div 
      $('#posts_results').html(response["html_content"]); 
      alert('after'); 
     } 

    }); 

私はされますが示唆代わりに、あなたのAjaxのリクエストに1個のデータずつ作成jqueryののserialize方法を使用するか、またはFormDataオブジェクトを作成し、また、代わりにGETの、あなたの要求は、より安全で行うためにPOSTを使用し