django publication de formulaire de commentaires jquery trop de fois

Question

j'ai modifié mon comments/form.html et comments/posted.html à travailler d'une manière similaire à Facebook, à savoir que vous postez un commentaire, les données posted est ensuite rechargées et joint en annexe à un certain div une donnée ID.

Le problème que j'ai est qu'il semble afficher toutes les données pour le nombre de formes.

Donc le scénario est, j'ai 5 formes, une avec des données dedans, si je frappe alors le commentaire, il soumet les données, 1 succès mais 4 retour vide.

<div id="commentload"></div> 
<div class="comments"> 
    <form action="{% comment_form_target %}" method="post" class="comment-form"> 
    {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %} 
    {% for field in form %} 
     {% if field.is_hidden %} 
      {{ field }} 
     {% else %} 
     {% if field.errors %}{{ field.errors }}{% endif %} 
      <p 
      {% if field.errors %} class="error"{% endif %} 
      {% ifequal field.name "honeypot" %} style="display:none;"{% endifequal %}> 
      </p> 
     {% endif %} 
    {% endfor %} 
    <textarea id="id_comment" rows="1" cols="60" name="comment" class='id_comment'></textarea> 
    <p class="submit"> 
     <input type="submit" name="post" class="submit-post blue comment_submit" value="{% trans "Comment" %}" id="button" style="float:right;margin-top:-6px;margin-bottom:4px;"/> 
    </p> 
    <div class="clearfix"></div> 
    </form> 

</div> 

Et puis mon jQuery se présente comme suit

<script type="text/javascript"> 
    $(document).ready(function(){ 
     // Here it runs a simple each statement to apply a unique ID to each comment-form 
     $('.comment-form').each(function(){ 
      var element = $(this).find('#id_object_pk').val(); 
      $('#commentload').attr('id','commentload'+element); 
      $(this).attr('name', element); 
      $(this).attr('id', element); 
      $(this).find('#button').attr('id', element); 
      $(this).find('#id_content_type').attr('id', 'id_content_type' + element); 
      $(this).find('#id_timestamp').attr('id', 'id_timestamp' + element); 
      $(this).find('#id_security_hash').attr('id', 'id_security_hash' + element); 
      $(this).find('#id_comment').attr('id', 'id_comment' + element); 
     }); 

     $(".comment_submit").live("click",function() { 
      var ID = $(this).attr('id'); 

      var content_type = $('#id_content_type'+ID).val(); 
      var timestamp = $('#id_timestamp'+ID).val(); 
      var security_hash = $('#id_security_hash'+ID).val(); 
      var comment = $('#id_comment'+ID).val(); 
      var dataString = 'content_type='+ content_type +'&timestamp='+ timestamp +'&security_hash=' + security_hash + '&comment=' + comment + '&object_pk=' + ID; 

      if (comment=='') { 
       alert('Please enter a comment'); 
      } else { 
       $('#id_comment'+ID).val('').addClass("greyout"); 
       $.ajax({ 
        type: "POST", 
        url: "{% comment_form_target %}", 
        data: dataString, 
        cache: false, 
        success: function(html){ 
         $("#commentload"+ID).append(html); 
         $('#id_comment'+ID).val('').removeClass("greyout").focus(); 
        } 
       }); 
      } 
      return false; 
     }); 
    }); 
</script> 

HTML SORTIE la différence entre les formes évidemment l'ID pour chacun

<div id="wall-comments"> 
    <div class="comments"> 
    <form action="/comments/post/" method="post" class="comment-form" id="114"> 
     <input type="hidden" name="content_type" value="wall.post" id="id_content_type114"> 
     <input type="hidden" name="object_pk" value="114" id="id_object_pk"> 
     <input type="hidden" name="timestamp" value="1291370494" id="id_timestamp114"> 
     <input type="hidden" name="security_hash" value="2d208d05d725528dfef940d8a5b520362faa3317" id="id_security_hash114"> 
     <textarea id="id_comment114" rows="1" cols="60" name="comment" class="id_comment" style="height: 24px; overflow-x: hidden; overflow-y: hidden; "></textarea> 
     <p class="submit"> 
      <input type="submit" name="post" class="submit-post blue comment_submit" value="Comment" id="114" style="float:right;margin-top:-6px;margin-bottom:4px;"> 
     </p> 
     <div class="clearfix"></div> 
    </form> 
    </div> 
</div> 

Answer 1

Vous liez le clic Fonctionne trop de fois. Vous devez seulement appeler .live ("click", function() {}); Une fois par page de chargement. Ou bien vous devriez utiliser die() pour délier les fonctions avant d'appeler à nouveau live().

Je pense toujours que c'est la réponse. Changez l'appel .live de clic pour être:

$(".comment_submit").die("click").live("click",function() { 
    var ID = $(this).attr('id'); 

    var content_type = $('#id_content_type'+ID).val(); 
    var timestamp = $('#id_timestamp'+ID).val(); 
    var security_hash = $('#id_security_hash'+ID).val(); 
    var comment = $('#id_comment'+ID).val(); 
    var dataString = 'content_type='+ content_type +'&timestamp='+ timestamp +'&security_hash=' + security_hash + '&comment=' + comment + '&object_pk=' + ID; 

    if (comment=='') { 
     alert('Please enter a comment'); 
    } else { 
     $('#id_comment'+ID).val('').addClass("greyout"); 
     $.ajax({ 
      type: "POST", 
      url: "{% comment_form_target %}", 
      data: dataString, 
      cache: false, 
      success: function(html){ 
       $("#commentload"+ID).append(html); 
       $('#id_comment'+ID).val('').removeClass("greyout").focus(); 
      } 
     }); 
    } 
    return false; 
});