（Django）Ajax - 複数のオブジェクト

Question

私は本当にAjaxとDjangoでいくつかの助けが必要です！私はすべてのItemオブジェクトを反復しようとしています。そのため、それぞれが個々のフォームを持ち、favoriteのアイテムにajaxボタンを付けることができます。ここ は私のフォームである：ここでは

<div class="row"> 
{% for item in items%} 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     {% if item.photo %} 
     <img src="{{ MEDIA_URL }}{{item.photo.url}}"> 
     {% endif %} 
     <div class="caption"> 
     <h3>{{item.name}}</h3> 
     <p>{{item.description}}</p> 
     <h3>Price: {{item.price}}</h3> 
     <h3>Rating: {{item.rating}}</h3> 
     <p> 
      <form id="add_favorite_form"> 
       {% csrf_token %} 
       <button id='fav' class='btn btn-primary' type="submit" data-itemid="{{item.id}}" value="Favorite"> 
       Favorite 
       <span class="glyphicon glyphicon-thumbs-up"</span></a> 
      </form> 
     </p> 
     </div> 
    </div> 
    </div> 
{% endfor %} 
</div> 

は、Ajaxです：

<script type="text/javascript"> 
     $(document).on('submit', '#add_favorite_form',function(e){ 
      e.preventDefault(); 
      var $fav = $('#fav'); 
      $.ajax({ 
       type: "POST", 
       url: "/items/favorites/", 
       data: { 
        id: $($fav).attr('data-itemid'), 
        csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val() 
       }, 
       success: function(){ 
        alert("button works but is broken. Only the first Item instance is added to favorites") 

       } 
      }); 
     }); 
    </script> 

そして最後に、私の見解：あなたが見ることができるように、ボタンがdata-*として

def favorite_item(request): 
    favorites, created = Favorite.objects.get_or_create(user=request.user) 
    if request.method == "POST": 
     id = request.POST['id'] 
     item = Item.objects.get(id=id) 
     print item 
     favorites.items.add(item) 
     favorites.save() 
    return HttpResponse(' ') 

を{{item.id}}使用していますこれは、個々のitem.idの値をajaxスクリプトの変数var $fav = $('#fav');に渡すと仮定しました。ただし、favoritesに追加されたのはItemオブジェクトだけなので、最初のitem.idだけが渡されたようです。

どうすればこの問題を解決できますか？助けてくれてありがとう。

Answer 1

1. あなたは、ループ内のid favとHTML要素を作成しています。ループに複数の反復がある場合、同じIDを持つ複数の要素を含む不正なHTMLが生成されます。

2. サブミットイベントをトリガーした要素ではなく$('#fav')を検索します。

=>マークアップからid='fav'を削除してください。あなたがしたいが、それは必要ではない場合（あなたはid='fav-{{item.id}}などのIDを追加することができます

=>あなたのJSを変更します。

<script type="text/javascript"> 
    var csrftoken = $("input[name=csrfmiddlewaretoken]").val(); 
    $(document).on('submit', '#add_favorite_form',function(e){ 
     e.preventDefault(); 
     var itemId= $(e.target).data('itemid'); // jquery +1.4.3 or attr() 
     $.ajax({ 
      type: "POST", 
      url: "/items/favorites/", 
      data: { 
       id: itemId, 
       csrfmiddlewaretoken: csrftoken 
      }, 
      success: function(){ 
       alert("Added favorite " + itemId); 
      } 
     }); 
    }); 
</script> 

EDIT：それを行うには

簡単な方法、使用することですこのようちょうどAJAXを経由して、それを提出するなど、フォーム

<form id="add_favorite_{{ item.id }}" class="add_favorite_form" method="POST" action="{% url 'add-favorite' %}"> 
    {% csrf_token %} 
    <input type="hidden" name="id" value="{{ item.id }}" /> 
    <button id='fav' class='btn btn-primary' type="submit" value="Favorite"> 
     Favorite 
    <span class="glyphicon glyphicon-thumbs-up"</span></a> 
</form> 

JS：。

<script type="text/javascript"> 
    var csrftoken = $("input[name=csrfmiddlewaretoken]").val(); 
    $(document).on('submit', '.add_favorite_form',function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var $form = $(this); 
     var url = $form.attr("action"); 
     var thisId = $form.attr("id"); 
     $.post(url, $form.serialize()) 
      .done(function(data) { 
       alert("Added favorite " + thisId); 
      }); 
    }); 
</script> 

Answer 2

あなたはいくつか間違っているが、問題を引き起こしているのは、$('#fav')がそのIDを持つページの最初の要素を見つけられることだけです。

現在のjavascriptは、ページの送信に依存しているため、調整が難しいでしょう。あなたはボタンをonclickイベントを使用するように変更することができます。

まだCSRFトークンを含める必要がありますが、その方法については多くのリソースがあります。

<button onclick="favourite({{item.id}})" class='btn btn-primary' value="Favorite"> 

function favourite(id){ 
    // Use the id passed to the method 
}