недавно я столкнулся с проблемой, которая связана с тем, что на странице, где у меня есть 3 формы в сообщении блога (все они имеют отдельные представления для их обработки), после того, как я хочу отправить комментарий, страница зависает, и мне нужно закрыть страницу. Это произошло как на Chrome, так и на Safari. Я не знаю, где проблема, так как я не вижу ошибок на консоли, я вижу, что POST успешно выполняется на терминале, и я не вижу никаких ошибок в целом.
My javascript, который обрабатывает Ajax:
$(document).ready(function(){
$('textarea').keyup(function (e) {
var rows = $(this).val().split("\n");
$(this).prop('rows', rows.length);
});
var s = 0;
$("#post-comment-button-viewer").click(function(){
if(s == 0){
$('textarea').val('')
$("#post-comment-form-div").fadeIn();
s = -1;
} else {
$("#post-comment-form-div").fadeOut();
s = 0;
}
})
$('.inside-post-detail #likeBtn').on("click", function (e) {
e.preventDefault();
if($(".inside-post-detail #likeBtn i").hasClass("fa-thumbs-up")){
$(".inside-post-detail #likeBtn i").removeClass("fa-thumbs-up").addClass("fa-thumbs-down");
} else {
$(".inside-post-detail #likeBtn i").removeClass("fa-thumbs-down").addClass("fa-thumbs-up");
}
})
$('.post-comment-form').on("submit", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
$.ajax({
type:'POST',
url: $(this).attr('action'),
headers: {'X-CSRFToken': '{{ csrf_token }}'},
data: $(this).serialize(),
dataType: 'json',
success: function(data) {
$("#post-linked-comments div").html(data.comments);
$('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);
}
});
$(".comment-reply-form").on("submit", function () {
$('.post-comment-form textarea').val('');
$(this).submit();
$("modal-comment-reply").modal("hide");
})
},
error: function(rs, e){
console.log(rs.responeText);
},
})
})
$("#modal-comment-reply textarea").attr("placeholder","Add your reply")
$("#modal-comment-reply textarea").addClass("comment-reply-adjust")
$('.reply-btn').on("click", function () {
var c_id = $(this).data('id');
$('textarea').val('');
$("#c-get-id").val(c_id);
$("#modal-comment-reply").modal("show");
});
$(".comment-reply-form").on("submit", function () {
$(this).submit();
$("modal-comment-reply").modal("hide");
});
$('.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);
}
});
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
});
Мой взгляд:
@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)
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
comments = Comment.objects.filter(post=post,reply=None)
comment_count = post.comment_count()
data['comments'] = render_to_string('home/posts/post_comment.html',{'post':post,'comments':comments,'comment_count':comment_count},request=request)
return JsonResponse(data)
else:
form = CommentForm
comment_count = post.comment_count()
context = {'post':post,
'form':form,
'comments':comments,
'comment_count':comment_count,
}
return render(request,'home/posts/post_detail.html',context)
и мои формы для комментариев:
<form method="POST" action="{% url 'home:post-detail' post.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>
Обратите внимание, что для ответа я использую модальный с та же форма, в которой c hte ответ обрабатывается успешно без сбоев страницы.
<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">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="." 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>
Я не вижу ошибок ни на консоли Chrome, ни на моем терминале. Мой комментарий отправлен, но мне нужно выйти из страницы и войти снова. Я очистил кэш, и мой chrome обновлен.
Спасибо за всю помощь в Advance!