Question

I implemented Django ajax comment submission in my app using Nick Carroll’s method here. I’d like the user that posted the comment, date of submission and comment to appear on the page using ajax after the server has received and saved it. What’s a good way to do this?

Answer 1

Alright this is kind of a hackerish way to go about this, but I think I’ve figured out a decent solution:

<script type="text/javascript" charset="utf-8">
    function bindPostCommentHandler() {
        $('#comment_form form input.submit-preview').remove();
        $('#comment_form form').submit(function() {
            var comment_text = $('#id_comment').val();
            $.ajax({
                type: "POST",
                data: $('#comment_form form').serialize(),
                url: "{% comment_form_target %}",
                cache: false,
                dataType: "html",
                success: function(html, textStatus) {
                    $('#comment_form form').fadeTo(500, 0, function(){
                        $(this).remove();
                    });

                    var today = new Date();
                    var dd = today.getDate();
                    var mm = today.getMonth()+1;
                    var yyyy = today.getFullYear();
                    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} var today = mm+'/'+dd+'/'+yyyy;
                    var comment = "<div class='comment'><h4>User " + "\"{{ user.username }}\"" + " Rating <small>" + today + "</small></h4>" + comment_text + "</div><hr />";
                    $(comment).hide().prependTo("#comments_loc").fadeIn(1000);  
                    bindPostCommentHandler();
                },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('#comment_form form').replaceWith('Your comment was unable to be posted at this time.  We apologize for the inconvenience.');
                 }
           });
        return false;
    });
}

$(document).ready(function() {
    bindPostCommentHandler();
});
</script>

I’m relatively new to javascript so I put this together with what little I know. Feel free to leave some comments if you think this could be cleaned up.