I'm adding AJAX comments to my Django project, but the comments are not saved. Could you please tell me where I have a mistake?
This is AJAX file:
$(document).ready(function () {
$('#comment-form').on('submit', function (event) {
event.preventDefault();
console.log("form submitted!") // sanity check
create_comment();
});
function create_comment() {
console.log("create comment is working!")
$.ajax({
url: "/friends_plans/new_comment/",
type: "POST",
headers: {"X-CSRFToken": getCookie("csrftoken")},
data: {text: $('#comment-text').val(), wish_list_id: $('#wish_list_id').val()},
success: function (json) {
$('#comment-text').val('');
console.log(json);
$("#comments").append('<div class="row"><div class="panel panel-default"><div class="panel-body">'+json.text+'</p><p style="float: right">'+json.person+',  </p></div></div><br>');
},
error: function () {
alert("some erors!");
}
});
};
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
});
This is function from views.py:
def new_comment(request):
form = Comment_to_wish_listForm(request.POST)
print ("function1")
if form.is_valid():
print ("function2")
data = request.POST.copy()
wish_list_id = data['wish_list_id']
text = data['text']
wish_list = Wish_list.objects.get(id=wish_list_id)
comment = Comment_to_wish_list(text=text, comment_to=wish_list, person=request.user)
comment.save()
response_data = {}
response_data['text'] = comment.text
response_data['person'] = comment.person.username
return HttpResponse(
json.dumps(response_data),
content_type="application/json"
)
return render(request, 'friends_plans/index.html', {})
This is part of template:
...
<h3> Comments </h3>
{% if message %}
<p style="color:red">{{ message }}</p>
{% endif %}
<div id="comments">
{% for comment_to_wish_list in wish_list.comment_to_wish_list_set.all %}
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
{{ comment_to_wish_list.text }}
</div>
</div>
<p style="float: right"> {{ comment_to_wish_list.person }}</p>
</div>
</div>
<br>
{% endfor %}
</div>
{% if user.is_authenticated %}
<form id="comment-form" action="/new_comment/{{wish_list.id }}/" method="post">
{% csrf_token %}
<div class="form-group">
{{ form.text }}
<input type="text" name="text" id="comment-text" placeholder="Text" width="250" height="50" value="">
</div>
<input type="hidden" name="wish_list_id" id="wish_list_id" value="{{ wish_list.id }}">
<div class="form-group">
<input type="submit" name="create-comment" id="create-comment" value="Create">
</div>
</form>
{% else %}
<p>Log in or register! </p>
{% endif %}
...
This is URL:
url(r'^new_comment/$', views.new_comment, name="new_comment")
Everything is ok with POST method. I can see the message from print ("function1"), but no message from print ("function2"), and the comment is not saved. Another problem is that the function from AJAX file is called twice, I can't understand why.