django: dynamically inserting comment form using jquery

Question

I'm building a Q&A site where one can comment on questions and their answers.Its a threaded commenting system with ajax.

this is the javascript part:

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

the html part:

<!-- 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>

The problem is, when there is only a single form in a page it works smoothly. With multiple forms its working but sending the request to the server muliple times(grows in multiples).

Also, it would be better to dynamically insert/remove forms. But if I add the html for forms manually, I'll miss out csrf tokens and timestamp fields in the comment form. Anybody has solutions to these ?

Answer 1

assign an #id to every form, and use this id instead of 'this'

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

Answer 2

The problem is, when the success function is called, then you call bindPostCommentHandler (again), which binds the anonymous function again to all form objects. I.e. after one submission, every form has two functions bound to the submit event, after two submission, three and so on.

So you have to change the success part of the Ajax function to only add the handler to the form contained in the response.

Maybe like this (I don't know if this works, I am not that good in Javascript/jQuery):

Edit:

You mentioned the first one is working. Then the code is probably not working because, the DOM gets replaced. See my updated code (use htmlinstead of replace).

Edit 2:

What about changing your HTML structure. Just wrap another div around the comments and the form and replace the contents of this. This should definitely work. Something like

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

Then you have to call two times 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);
});