django ajax multiple form submission

Question

My template looks like :

    {% for comment in service.comments.all %}
    {{comment.comment}} -- commented by {{comment.user}}<br/>

  <div id="comment-reply">
        `{% for reply in comment.comment_replies.all %}`

    <p>{{reply.comment_reply}} -- replied by {{reply.user}}</p><br/>

    {% endfor %}
  </div>


    <a class="myClick" href="#">Reply</a><br/>
    <form class="comment-replyform" action="some_url" method="post" style="display: none;">{% csrf_token %}

      {{ comment_reply_form.as_p }}

    <input type="submit" name="submit" value="Reply">
    </form>

    {% empty %}
    No comments 
    {% endfor %}

Here I have comment replies for comment. My comments and comment replies are listing properly. Here What I want is when I click on Click I want to display the comment reply form, which is displaying fine..

My jquery looks like :

    $(".myClick").click(function(event){
  event.preventDefault();
  $(".comment-replyform").show();
  $(".myClick").hide();
 })

    $('.comment-replyform').on('submit', function(event){
            event.preventDefault();
      $.ajax({
               url: $(this).attr('action'),
               type: $(this).attr('method'),
               data: $(this).serialize(),
               success: function(response) {
                    $('#id_comment_reply').val('');
                    $('#comment-reply').append("<p>"+response.comment_reply+" -- "+"replied by "+ response.user+"</p><br/>")
                }

                });        
    })

The problem is when I click on Click, it displays all the form for comment replies but I want only the form to be shown where I click

Another thing is when I submit the first form it works well but when I submit second or third form... The value is shown on the first div. I mean the comment reply for second form is appended to first.

How can I solve this ?

romainm · Accepted Answer · 2015-09-28 06:55:21Z

1

It is showing all of them because you ask all the elements with the class "comment-replyform" to be shown, instead you have to focus on the one inside the clicked element. to do so, replace:

 $(".comment-replyform").show();

by:

$(this).next().next(".comment-replyform").show();;

for the second part of your question, it is because you should only have one element with a specific ID, so:

replace id="comment-reply" with class="comment-reply" in your for loop
replace $('#comment-reply').append(...) with $(this).prev('.comment-reply').append(...)
finally replace $('#id_comment_reply').val(''); with $(this).prev('.comment-reply').val(''); and it should work

edited Sep 28, 2015 at 6:55

answered Sep 24, 2015 at 11:32

romainm

2818 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

varad Over a year ago

when I do $(this).children(".comment-replyform").show(); nothing is shown

romainm Over a year ago

sorry it was no a children in that point, this one should do the trick : $(this).nextAll(".comment-replyform").show();

varad Over a year ago

I did this too.. when I click the first Click it displays both form and when I click second Click it displays only second form but the Click in form is not shown. Any help ?

romainm Over a year ago

$(this).next().next().show(); this one should work for sure if your html code is exactly the one you provide ( first next is the <br/> second is the one you need)

varad Over a year ago

I should not provide .comment-replyform" in here ??

|

Collectives™ on Stack Overflow

django ajax multiple form submission

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related