Wiki

Clone wiki

django-ajaxcomments / Home

Overview

DEPRECATED: This app is no longer maintained and is not thread safe.

Django-Ajaxcomments uses decorators to enhance the functionality of the built-in comments app to support Ajax-based comment posting.

The first decorator, jsonify_if_ajax, wraps the instances of render_to_response and next_redirect used by the comments app and checks to see if the request was submitted via Ajax. If so, it checks for errors, and pushes a response to the Javascript callback function encoded in JSON.

The second decorator, include_request wraps the comments app's post_comment view. Each time the view is called, the decorator rewraps the responses to give jsonify_if_ajax the current request object.

The post-comment.js file handles the client-side interaction using jQuery. If the Ajax request is unsuccessful (meaning the HTTP response status code was something other than 200), then the script unbinds itself from the form's submit event and pushes the comment through the standard non-Ajax interaction path so that the error can be handled normally.

Requirements

This project requires Django's built-in Comments app, described here: Django's comments framework

INSTALLED_APPS = (
    ...
    'django.contrib.comments',
)

The included post-comment.js script requires jQuery, but if you prefer a different framework or just plain JavaScript, you can replace it with minimal effort and no change to the back end.

Installation

First, run the distutils setup script or manually copy the ajaxcomments folder into your PYTHONPATH. Official releases are posted on Pypi, so you can also use pip to install.

$ python setup.py install

Next, add a line to your settings.py INSTALLED_APPS setting:

INSTALLED_APPS = (
    ...
    'django.contrib.comments',
    'ajaxcomments',
)

Create a comment template in your project's template directory called comments/comment.html. This will be used to render a new comment after it is submitted through Javascript. Customize the template to fit your site.

<div class="comment">
    ... (your comment markup here) ...
    {{ comment.comment }}
    ...
</div>

Copy the included media to your projects static media folder. This typically goes under an ajaxcomments subdirectory:

$ cp -r ajaxcomments/media /mypath/myproject/media/ajaxcomments

Customize the post-comment.js file to fit your project's HTML structure. You will likely want to edit the jQuery selectors used, and the HTML inserted in various places for the comment itself and the wait messages.

Make sure that you link to the script within your template:

<script src="{{ MEDIA_URL }}ajaxcomments/js/post-comment.js"
    type="text/javascript"></script>

Finally, for each page that you intend to use Ajaxcomments with, create a quick script to bind the submit event of the form to the ajaxComment function from post-comment.js:

$(document).ready(function() {
    // Customize the location of the media to match your project structure
    media = 'http://media.brandonkonkle.com/ajaxcomments'
    
    // Customize the selector for your project
    $('div.comment-form form').submit(function() {
        ajaxComment({'media': media});
        return false;
    });
});

If you are creating this as a separate script file and linking it to your template with a script tag, make sure that this script is loaded after the post-comment.js script, or you will get errors saying that ajaxComment() is undefined.

You may also want to customize the ajax-wait.gif file so that it will fit in with the theme of your site.

If you experience issues, please feel free to file an issue and I'd be glad to help out!

Updated