django: динамическая вставка формы комментария с использованием jquery

Question

Я создаю сайт вопросов и ответов, где можно комментировать вопросы и их ответы. Это многопоточная система комментирования с ajax.

это часть javascript:

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

присваивает #id каждой форме и использует этот идентификатор вместо 'this'

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

Answer 2

Проблема в том, что когда вызывается функция success, вы вызываете bindPostCommentHandler (снова), который связывает анонимную функцию снова со всеми объектами формы. То есть после одной отправки каждая форма имеет две функции, связанные с событием отправки, после двух передач - три и т. д.

Таким образом, вы должны изменить часть success функции Ajax, чтобы добавить только обработчик в форму, содержащуюся в ответе.

Может быть, так (я не знаю, работает ли это, я не так хорош в Javascript / jQuery):

Изменить:

Вы упомянули, что первый работает. Тогда код, вероятно, не работает, потому что DOM заменяется. Смотрите мой обновленный код (используйте html вместо replace).

Редактировать 2:

Как насчет изменения структуры HTML. Просто оберните другой div вокруг комментариев и формы и замените его содержимое. Это должно определенно работать. Что-то вроде

<div class="new_around_comments">
   <div class="comments"></div>
   <div class="commentFormWrapper">
       <!-- Form -->
   </div>
</div>

Тогда вам нужно два раза позвонить parent():

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);
});