AJAX comments not working, getting redirect to /blog/comments/posted/?c=
travislbrundage opened this issue · 2 comments
Hi there,
I am having some trouble getting AJAX comments to work in my application. I want to have threaded comments with AJAX so that it gives feedback on the same page to the user, but instead I am being redirected to /blog/comments/posted/?c=[comment number]. This is the link designated by the default django comments app actually, and I am not sure why this is happening. If I look on my page, I can see the ajax template is partially loaded - The "Post" button alongside of "cancel reply" exists beneath the form, which is in the ajax template, but when I actually use it, I get the redirect.
Here is my setup. I'm only displaying the code I have relevant to implementing this app.
In my settings.py, I have:
INSTALLED_APPS += (
# Adding Threaded Comments app
'fluent_comments',
'crispy_forms',
'threadedcomments',
'django_comments',
'django.contrib.sites'
)
COMMENTS_APP = 'fluent_comments'
In my urls.py, I have added:
urlpatterns = patterns('',
# Adding Threaded Comments app
url(r'^articles/comments/', include('django_comments.urls')),
url(r'^blog/comments/', include('fluent_comments.urls'))
)
Next, I have overwritten some of the templates for my custom use case, but the changes are often minor.
In /templates/comments/base.html I have:
{% load i18n %}
{% block headtitle %}{% block title %}{% trans "Responses for page" %}{% endblock %}{% endblock %}
{% block main %}
<div id="comments-wrapper">
{% block content %}{% endblock %}
</div>
{% endblock %}
In /templates/comments/form.html I have:
{% load comments i18n crispy_forms_tags fluent_comments_tags %}{% load url from future %}
{% if not form.target_object|comments_are_open %}
<p>{% trans "Comments are closed." %}</p>
{% else %}
<form id="comment-form-{{ form.target_object.pk }}" data-object-id="{{ form.target_object.pk }}" action="{% comment_form_target %}" method="post" class="{{ form.helper.form_class|default:'js-comments-form comments-form form-horizontal' }}"
data-ajax-action="{% url 'comments-post-comment-ajax' %}">
{% if next %}<div><input type="hidden" name="next" value="{{ next }}" /></div>{% endif %}
{% crispy form %}
<div class="form-group">
<div class="col-sm-10">
<input type="submit" name="post" class="btn btn-primary" value="{% trans 'Post' %}" />
{% ajax_comment_tags for form.target_object %}
</div>
</div>
</form>
{% endif %}
In /templates/comments/comment.html I have:
{% load i18n %}
{% load comments %}
{% load fluent_comments_tags %}
{% load friendly_loader %}
{% friendly_load avatar_tags %}
<article class="col-md-12 comment" style="{% if forloop.counter %}{% if forloop.counter|divisibleby:2 %}background-color: #EEE;{% endif %}{% endif %}">
<div class="avatar pull-left"><a href="{{ comment.user.get_absolute_url }}">{% avatar comment.user 40 %}</a></div>
<p class="comment-description">
{{ comment.comment|linebreaks }}
<div class="comment-author">
<p style="margin-top: -10px;">{% trans 'By' %} <a href="{{ comment.user.get_absolute_url }}" rel="author">{{ comment.user }}</a> on <time>{{ comment.submit_date|date:"M j, Y" }}</time></p>
</div>
{% if user.is_authenticated %}
<a href="#form_post_comment_div{{ comment.id }}" class="btn btn-primary btn-xs" id="c{{ comment.id }}" role="button" data-toggle="collapse">Reply</a>
{% endif %}
</p>
</article>
In /templates/fluent_comments/templatetags/threaded_list.html I have:
{% comment %}
The template for threadedcomments, spiced up.
This is included via comments/list.html
The id="comments-..." is required for JavaScript,
the 'comments/comment.html template is also used by the Ajax view.
{% endcomment %}
{% load threadedcomments_tags %}
<div id="comments-{{ target_object_id }}" data-object-id="{{ target_object_id }}" class="comments {% if not comment_list %} empty{% endif %}">
{% for comment in comment_list|fill_tree|annotate_tree %}
{% ifchanged comment.parent_id %}{% else %}</li>{% endifchanged %}
{% if not comment.open and not comment.close %}</li>{% endif %}
{% if comment.open %}<ul class="comment-list-wrapper">{% endif %}
<li class="comment-wrapper">
{% include "comments/comment.html" %}
{% if user.is_authenticated %}
<div class="collapse" id="form_post_comment_div{{ comment.id }}">{% render_comment_form for resource with comment.id %}</div>
{% endif %}
{% for close in comment.close %}</li></ul>{% endfor %}
{% endfor %}
</div>
So basically everything works as I expect it to. The only thing that isn't working is that I get a redirect when hitting the "Post" button rather than updating within the page as I expect. I don't have a custom template code for the ajax comments, so it should be the default template:
{% load i18n %}
<a href="#c0" class="comment-cancel-reply-link">{% trans "cancel reply" %}</a>
<span class="comment-waiting" id="comment-waiting-{{ target_object.pk }}" style="display: none;">
<img src="{{ STATIC_URL }}fluent_comments/img/ajax-wait.gif" alt="" class="ajax-loader" />{% trans "Please wait . . ." %}
</span>
<span class="comment-added-message" id="comment-added-message-{{ target_object.pk }}" style="display: none;">{% trans "Your comment has been posted!" %}</span>
<div class="comment-moderated-message" id="comment-moderated-message-{{ target_object.pk }}" style="display: none;">{% trans "Your comment has been posted, it will be visible for other users after approval." %}</div>
Basically, Line 3 and after of the ajax template don't work - but I know the template is in fact being loaded because the "cancel reply" appears, and only if I have the ajax template in my code. Have I missed something, or is there a bug with the ajax template?
Looks like this might be a duplicate of #30 , but I don't see any errors in my console. I have no indication that any of the javascript loaded incorrectly. My jQuery version I'm using is v2.2.0. Also, I'm only having the first issue with the AJAX - my threaded comments are loading as I expect.
I'm cleaning up old issues, I'm presuming this is already fixed, as my site runs on jQuery 3 already.