Django Ajax форма не отправляется и страница зависает - PullRequest
Новая
       83

Django Ajax форма не отправляется и страница зависает

1 голос
/ 30 апреля 2020

Я пытаюсь отправить форму, используя Ajax, однако после нажатия кнопки отправки я вижу, что мое представление успешно вызывается в терминале, но сообщение об успехе не распечатывается, и страница зависает. Я предполагаю, что мой ajax звонок застревает.

моя форма: 

 <form method="POST" data-url="{% url 'home:post-detail' guid_url %}" class="post-comment-form" style="height: 1rem;">
              {% csrf_token %}
              <div class="input-group">
                {{ form }}
                <div class="input-group-append">
                  <button class="btn btn-sm small btn-outline-primary ml-1" style="height: 2.3rem; border-radius: 20px; text-decoration: none;" type="submit">Add</button>
                </div>
              </div>     
            </form>

моя ajax функция: РЕДАКТИРОВАТЬ 

$('.post-comment-form').on('submit', function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var form = $(this).serialize();
    $.ajax({
      url: $(this).attr('data-url'),
      type: $(this).attr('method'),
      data: form,
      dataType: 'json',
      success: function(data) {
        $("#post-linked-comments div").html(data.comments); // This line is causing the page to be unresponsive
        console.log("successfully submitted form")
        $('textarea').val('');
        $('.reply-btn').on("click", function () {
          $("#modal-comment-reply textarea").attr("placeholder","Add your reply")
          $("#modal-comment-reply textarea").addClass("comment-reply-adjust")
          var c_id = $(this).data('id');
          $("#c-get-id").val(c_id);
          $('textarea').val('');
          $("#modal-comment-reply").modal("show");
          });
          $('.view-replies').on('click', function () {
          var h = $(this).data('hidden');
          var curr = $(this).text()
          var newt = $(this).attr('text')
          $(this).text(newt)
          $(this).attr("text",curr)
          var id = $(this).data('id');
          if(h == 1){
            $("#c-"+id).show();
            $(this).data('hidden',0);
            } else {
            $("#c-"+id).hide();
            $(this).data('hidden',1);
            }
          });
      },
      error: function(rs, e){
                console.log(rs.responeText);
            },
    });
  });

Я уже пробовал: 

 $('.post-comment-form').on('submit', function (e) {});

мой взгляд на обработку функции: 

 @login_required
def post_detail(request, guid_url):
    data = dict()
    post = get_object_or_404(Post, guid_url=guid_url)
    comments = Comment.objects.filter(post=post,reply=None)
    if request.method == 'POST':
        form = CommentForm(request.POST or None)
        if form.is_valid():
            comment = form.save(False)
            reply_id = request.POST.get('comment_id')
            comment_qs = None
            if reply_id:
                comment_qs = Comment.objects.get(id=reply_id)
            comment.name = request.user
            comment.post = post
            comment.reply = comment_qs
            comment.save()
        else:
            data['is_valid'] = False
    else:
        form = CommentForm()
    guid_url = post.guid_url
    comment_count = post.comment_count()
    context = {'post':post,
                'form':form,
                'comments':comments,
                'comment_count':comment_count,
                'guid_url':guid_url,
                }
    if request.is_ajax():
        data['comments'] = render_to_string('home/posts/post_comment.html',context,request=request)
        return JsonResponse(data)
    return render(request,'home/posts/post_detail.html',context)

РЕДАКТИРОВАТЬ Мой шаблон для загрузки комментариев:

в post_detail. html: 

<div id="post-linked-comments" class="pb-1" style="margin: 0;">
        <div>
          {% include 'home/posts/post_comment.html' with comments=comments %}
        </div>    
      </div>

и мой postpost_comment. html: 

{% load static %}
{% with post=post %}
<script src="{% static 'js/like-comment-api.js' %}"></script> 
<script src="{% static 'js/comment.js' %}"></script> 
<div class="d-flex flex-row-reverse w-100" style="font-size: 0.8rem;">
  <div class="ml-2 mr-2">
    <span class="comment-count text-muted mr-1">{{ comment_count }}</span><span data-url="{% url 'home:post-comment-list' post.guid_url %}" class="u show-comments font-weight-bold text-dark font-size-small">Comments</span>
  </div>
  <div class="ml-2 mr-2"> 
    <span class="like-count-d text-muted mr-1"></span><span data-url="{% url 'home:post-like-list' post.guid_url %}" class="u show-likes font-weight-bold text-dark font-size-small">Likes</span>
  </div>
</div>
<hr class="mx-2 px-2" style="margin: 0;">
{% for comment in comments %}
{% with comment_uuid=comment.get_uuid %}
<div class="m-1">
  <div class="row w-100 pt-1 pl-4">
    <div class="col-xs">
      <img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
    </div>
    <div class="col-xs">
        <div class="border border-light" style="background-color: rgb(242, 243, 245); border-radius: 1rem;">
            <div class="m-1 px-2" style="font-size: 0.9rem;">
                <span class="text-dark font-size-smaller" href="#" style="font-weight: 600 !important ; color: rgb(9, 34, 110) !important;">{{ comment.name.first_name }} {{ comment.name.last_name }}</span>
                <span class="font-weight-light pl-2">{{ comment.body }}</span> 
            </div>
        </div>
        <div class="d-flex justify-content-left">
            <div>
              {% include 'home/posts/comment_like.html' with comment=comment  guid_url=guid_url %}
            </div>
            <div class="mx-1">
              <span class="text-muted small">·</span>
            </div>
            <div>
              <span class="small text-muted u reply-btn button-hide-outline" type="button" 
              data-id="{{ comment.id }}" data-toggle="modal" data-target="modal-comment-reply">Reply</span>
            </div>
            <div class="mx-1">
                <span class="text-muted small">·</span>
            </div>
            <div>
            <span class="text-muted small view-replies" data-hidden="1" data-id="{{ comment_uuid }}" text="Hide replies">Replies ({{ comment.replies.count }})</span>
            </div>
            <div class="mx-1">
                <span class="text-muted small">·</span>
            </div>
            <div>
                <span class="text-muted small">{{ comment.get_created_on }}</span>
            </div>   
        </div>
        <div class="comment-replies pl-4" id="c-{{ comment_uuid }}" style="display: none;">
            {% for reply in comment.replies.all %}
            <div class="row pl-4 py-2">
              <div class="col-xs">
                <img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
              </div>
              <div class="col-xs">
                <div class="border border-light" style="background-color: rgb(242, 243, 245); border-radius: 1rem;">
                    <div class="m-1 px-2" style="font-size: 0.9rem;">
                        <span class="text-dark font-size-smaller" href="#" style="font-weight: 600 !important ; color: rgb(9, 34, 110) !important;">
                            {{ reply.name.first_name }} {{ reply.name.last_name }}</span>
                        <span class="font-weight-light pl-1">{{ reply.body }}</span>
                    </div>      
                </div>
                <div class="d-flex justify-content-left">
                  <div>
                    {% include 'home/posts/comment_like.html' with comment=reply guid_url=guid_url %}
                  </div>
                  <div class="mx-1">
                    <span class="text-muted small">·</span>
                  </div>
                  <div>
                    <span class="text-muted small">{{ reply.get_created_on }}</span>
                  </div>  
                </div>
              </div>
            </div>
            {% empty %}
            <div class="d-flex justify-content-center">
              <p class="m-0 small text-muted">No replies to show</p>
            </div>
            {% endfor %}
          </div>
      </div>
  </div>
</div>
<div class="modal fade" id="modal-comment-reply">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="height:3.3rem;margin-top: -10px;">
        <p style="font-weight: bold;font-size: 1.4rem;"><span class="font-weight-light">replying to </span>@{{ comment.name.username }}</p>
        <button type="button" class="button-hide-outline close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="POST" data-url="{% url 'home:post-detail' guid_url %}" class="comment-reply-form" style="height: 1rem;">
          {% csrf_token %}
          <input type="hidden" id="c-get-id" name="comment_id" value=""/>
          <div class="comment-reply-form" style="min-height: 10rem;">
            {{ form }}
          </div>
          <div class="d-flex my-2 justify-content-between">
            <div></div>
            <div>
              <button class="btn btn-md small btn-outline-primary ml-1" style="border-radius: 20px;" type="submit">Reply</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endwith %}
{% empty %}
<div class="d-flex justify-content-center">
<p class="font-weight-lighter text-muted">No comments to show</p>
</div>
{% endfor %}
{% endwith %}

Я добавил еще файлы. Я нашел причину ошибки, но я не знаю, что ее вызывает. Если я удаляю эту строку, комментарий добавляется, но мне нужно обновить страницу sh, чтобы увидеть ее.

...