2016-12-14 23 views
0

私はカタログページを作成しています。このページでは、ユーザーが製品をフィルタリングできるようにしたいと考えています。 したがって、チェックボックスと入力テキストを含むサイドバーを作成しました。 ユーザーがフィルタパラメータを変更するたびにカタログが更新されることをお勧めします。AjaxでDjangoビューを呼び出す

これは私のコードです:あなたが見ることができるように

<h3>Filtri:</h3> 
     <b>Marca:</b><br> 
     {% for marca in marche %} 
      <input type="checkbox" title="{{ marca.nome }}" value="{{ marca.nome }}" name="marca" class="marca" onclick="filtra()"> {{ marca.nome }} <br> 
     {% empty %} 
      <p>Nessuna Marca è ancora stata inserita.</p> 
     {% endfor %} 
     <br> 
     <b>Portata:</b> <br> 
     Maggiore di 
     <input type="text" title="portata" name="portata" id="portata" class="textbox-filtro" maxlength="4" onblur="filtra()"> kg 
     <br><br> 
     <b>Sollevamento:</b> <br> 
     Maggiore di 
     <input type="text" title="sollevamento" id="sollevamento" class="textbox-filtro" maxlength="4" onblur="filtra()"> mt 
     <br><br> 
     <b>Trazione:</b><br> 
     {% for tra in trazione %} 
      <input type="checkbox" title="{{ tra.trazione }}" value="{{ tra.trazione }}" id="{{ tra.trazione }}" class="trazione" onclick="filtra()"> {{ tra.trazione }} <br> 
     {% empty %} 
      <p>Nessuna Trazione è ancora stata inserita</p> 
     {% endfor %} 
     <br> 
     <b>Idroguida:</b><br> 
     {% for idro in idroguida %} 
      <input type="checkbox" title="{{ idro.idroguida }}" value="{{ idro.idroguida }}" id="{{ idro.idroguida }}" class="idroguida" onclick="filtra()"> {{ idro.idroguida }} <br> 
     {% empty %} 
      <p>Nessuna Idroguida è ancora stata inderita</p> 
     {% endfor %} 

、私は5つのフィルタグループました::サイドバー用

HTML(フィルター)マルカ(ブランド)、Portata(容量を運びます)、 Sollevamento(リフト)、Trazione(トラクション)、Idroguida(パワーステアリング)。

これらの値を編集するたびに、javascript関数filtra()が呼び出されます。テキスト入力の場合はonblur、チェックボックスの場合はonclickです。

ここではjavascriptのコード:そう

<script> 
     function getCookie(name) { 
      var cookieValue = null; 
      if (document.cookie && document.cookie !== '') { 
       var cookies = document.cookie.split(';'); 
       for (var i = 0; i < cookies.length; i++) { 
        var cookie = jQuery.trim(cookies[i]); 
        // Does this cookie string begin with the name we want? 
        if (cookie.substring(0, name.length + 1) === (name + '=')) { 
         cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
         break; 
        } 
       } 
      } 
      return cookieValue; 
     } 
     var csrftoken = getCookie('csrftoken'); 

     function csrfSafeMethod(method) { 
      // these HTTP methods do not require CSRF protection 
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
     } 



     function filtra() { 
      var marche_selezionate = []; 
      var marca_check = document.getElementsByClassName('marca'); 
      for(var i = 0; i < marca_check.length; i++){ 
       if(marca_check[i].checked){ 
        marche_selezionate.push(marca_check[i].value); 
       } 
      } 
      marche_selezionate = marche_selezionate.join(','); 

      var portata_selezionata = document.getElementById('portata').value; 
      var sollevamento_selezionata = document.getElementById('sollevamento').value; 

      var trazioni_selezionate = []; 
      var trazione_check = document.getElementsByClassName('trazione'); 
      for(i = 0; i < trazione_check.length; i++){ 
       if(trazione_check[i].checked){ 
        trazioni_selezionate.push(trazione_check[i].value); 
       } 
      } 

      var idroguida_selezionate = []; 
      var idroguida_check = document.getElementsByClassName('idroguida'); 
      for(i = 0; i < idroguida_check.length; i++){ 
       if(idroguida_check[i].checked){ 
        idroguida_selezionate.push(idroguida_check[i].value); 
       } 
      } 


      $.ajaxSetup({ 
       beforeSend: function(xhr, settings) { 
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
         xhr.setRequestHeader("X-CSRFToken", csrftoken); 
        } 
       } 
      }); 

      var postUrl = "{% url 'carrellielevatori:carrellielevatori' %}"; 
      $.ajax({ 
       url: postUrl, 
       type: 'POST', 
       data: {'marche_selezionate': marche_selezionate}, 
       success: function(result){ 
        alert('success'); 
        }, 
       error: function (xhr, ajaxOptions, thrownError) { 
        alert(xhr.status); 
        alert(thrownError); 
        } 
      }); 
     } 

    </script> 

、CSRFトークンを設定した後、「403は禁じられ、」エラーを回避する方法には、私が探し始めると、すべてのパラメータとそのI 5つの変数を設定カタログをフィルタリングするために、ビューで渡したいと思います。

また、成功したかどうかを知るために、ajax呼び出しでアラートを追加しました。そうです。 「成功」のアラートが表示されます。

問題はすべてがここで停止することです。 実際、このビューでは何も起こっていないようです。ここ

ビューのコード:それが動作するかどうか

def carrellielevatori(request): 
    lista_carrelli = Carrelli.objects.all() 
    lista_marche = Marche.objects.all() 
    lista_trazione = Trazione.objects.all() 
    lista_idroguida = Idroguida.objects.all() 

    footerForm = MailForm() 

    method = 'get' 
    if request.is_ajax(): 
    method = 'ajax' 
    return render(request, 
       'carrellielevatori/carrellielevatori.html', 
       { 
        'title': 'Carrelli Elevatori - Giemme Lift s.r.l.', 
        'footerForm': footerForm, 
        'year': datetime.now().year, 
        'carrelli': lista_carrelli, 
        'marche': lista_marche, 
        'trazione': lista_trazione, 
        'idroguida': lista_idroguida, 
        'method':method, 
       }) 

を理解するためには、私が「取得」し、ページに表示する変数の方法を設定しました。その後、ajaxの "if"では、値を "ajax"に変更します。 それは変更する必要がありますよね?テキストは「取得」のままで、「ajax」に変更されることはありません。

これは動作するかどうかを最初に確認しようとしています。この作業が分かれば、その製品のクエリをフィルタリングします。しかし、これがうまくいかないと、それは役に立たない。

PS。はい、私はただ1つのパラメータを渡す、AJAX呼び出しで。これは動作するかどうかを知ることです。その後、データフィールドに他のパラメータを追加します。

結論として、in request.is_ajax() 'に入力されない理由を教えてください。 これは正しい方法ではありません。どうやってoringalクエリをフィルタリングできますか? 私はrequest.method == 'POST'でも試しましたが、同じ結果が得られます。

@csrf_exempt 
def carrellielevatori(request): 
    lista_carrelli = Carrelli.objects.all() 
    lista_marche = Marche.objects.all() 
    lista_trazione = Trazione.objects.all() 
    lista_idroguida = Idroguida.objects.all()  
    footerForm = MailForm()  
    method = 'get' 
    if request.is_ajax(): 
     method = 'ajax' 
     return JsonResponse({ 
      'title': 'Carrelli Elevatori - Giemme Lift s.r.l.', 
      'footerForm': footerForm, 
      'year': datetime.now().year, 
      'carrelli': lista_carrelli, 
      'marche': lista_marche, 
      'trazione': lista_trazione, 
      'idroguida': lista_idroguida, 
      'method':method, 
     }) 

をJSで:ここで

+0

があなたのpythonビューに構文エラーがあります(余分な引用符をrequest.is_ajax '後に()') 。それは意図的なものか、コピー&ペーストエラーですか? – 2ps

答えて

0

は、私はそれを行うだろうかだ

function filtra() { 
     var marche_selezionate = []; 
     var marca_check = document.getElementsByClassName('marca'); 
     for(var i = 0; i < marca_check.length; i++){ 
      if(marca_check[i].checked){ 
       marche_selezionate.push(marca_check[i].value); 
      } 
     } 
     marche_selezionate = marche_selezionate.join(','); 

     var portata_selezionata = document.getElementById('portata').value; 
     var sollevamento_selezionata = document.getElementById('sollevamento').value; 

     var trazioni_selezionate = []; 
     var trazione_check = document.getElementsByClassName('trazione'); 
     for(i = 0; i < trazione_check.length; i++){ 
      if(trazione_check[i].checked){ 
       trazioni_selezionate.push(trazione_check[i].value); 
      } 
     } 

     var idroguida_selezionate = []; 
     var idroguida_check = document.getElementsByClassName('idroguida'); 
     for(i = 0; i < idroguida_check.length; i++){ 
      if(idroguida_check[i].checked){ 
       idroguida_selezionate.push(idroguida_check[i].value); 
      } 
     } 

     var postUrl = "{% url 'carrellielevatori:carrellielevatori' %}"; 
     $.post(postUrl, {'marche_selezionate': marche_selezionate}, 
      function(result){ 
       alert('success'); 
      }).fail(function (data, status, xhr) { 
       alert(xhr.status); 
       alert(thrownError); 
      }); 
    } 
関連する問題