django : 동적으로 jquery를 사용하여 주석 양식을 삽입하십시오.

Question

나는 Q를 구축하고 있습니다. & ajax가있는 스레드 주석 처리 시스템입니다.

이 자바 스크립트 일부입니다

function bindPostCommentHandler() 
{ 
    $('.commentFormWrapper form').submit(function() { 
    var current = $(this); 
     $.ajax({ 
      type: "POST", 
      data: current.serialize(), 
      url: "{% comment_form_target %}", 
      cache: false, 
      dataType: "html", 
      beforeSend:function(xhr){ 
       $('.submit', current).html('<img id="preloader" class="va-mid" src="{{MEDIA_URL}}img/indicator.gif" title="processing.." />'); 
       $('#commentError').remove(); 
      }, 
      success: function(html, textStatus) { 
       current.parent().replaceWith(html); 
       bindPostCommentHandler();     
      }, 
      error: function(xhr, textStatus, errorThrown) { 
       $('#commentError').remove(); 
       $('.submit', current).html('<input type="submit" name="submit" class="submit-post small-button" value="Submit" />'); 
       if(xhr.status == 400){ 
        current.before('<li id="commentError" class="no-bullet errornote margin10">OOPS ! your comment looked liked a spam. Try again with some modifications.</li>'); 
       }else { 
        current.before('<li id="commentError" class="no-bullet errornote margin10">Your comment was unable to be posted at this time. You may try after sometime.</li>'); 
       } 

      //bindPostCommentHandler();    

      } 
     }); 
     return false; 
    });   
} 
$(document).ready(function() { 
bindPostCommentHandler(); 
}); 

html로 부분 :

<!-- comment form for question --> 
<div class="commentFormWrapper">     
    {% render_comment_form for question %} 
</div> 

<!-- comment form for answers --> 
{% for answer in question.answers.all %} 
<div class="commentFormWrapper">     
    {% render_comment_form for answer %} 
</div> 

작동 페이지에 단 하나의 형태로있을 때 문제가입니다 부드럽게. 여러 양식으로 작동하지만 서버에 요청을 여러 번 전송합니다 (배수가 늘어남).

또한 양식을 동적으로 삽입/제거하는 것이 좋습니다. 그러나 수동으로 양식에 html을 추가하면 csrf 토큰과 주석 양식의 타임 스탬프 필드가 누락됩니다. 누구도 이것들에 대한 해결책을 가지고 있습니까?

Answer 1

문제입니다, 당신은 (다시) bindPostCommentHandler 전화의 ID를 사용 익명 함수 다시 모든 양식 개체. 나는. 하나의 제출 후에 모든 양식에는 두 가지 제출, 세 번 등의 두 가지 기능이 제출 이벤트에 바인딩됩니다.

따라서 응답에 포함 된 양식에만 처리기를 추가하려면 Ajax 함수의 success 부분을 변경해야합니다. 어쩌면이 같은

(이 작동하는지 내가 자바 스크립트/jQuery를에 좋은 아니에요, 모르는) :

편집 :

당신은 첫 번째가 작동 언급했다. DOM이 대체되기 때문에 코드가 작동하지 않을 수도 있습니다. 내 업데이트 된 코드를 확인하십시오 (replace 대신 html 사용).

편집 2 :

무엇 당신의 HTML 구조를 변경하는 방법에 대한. 단지 코멘트와 양식을 다른 div으로 감싸고이 내용을 대체하십시오. 이것은 확실히 작동해야합니다.

function bindPostCommentHandler(parent) 
{ 
    parent.find('form').submit(function() { 
    var current = $(this); 
     $.ajax({ 
      //... 
      success: function(html, textStatus) { 
       // Edit 2 
       parent = current.parent().parent() 
       parent.html(html); 
       bindPostCommentHandler(parent);   
      }, 
      //... 
     }); 
     return false; 
    });   
} 
$(document).ready(function() { 
var parent = $('.commentFormWrapper') 
bindPostCommentHandler(parent); 
}); 

Answer 2

을 결합하는, 모든 형태에 #ID을 할당하고, 대신 success 함수가 호출 될 때 '이'

var current_id = $(this).attr("id");