ajax - ajaxで送信した後にDjangoのコメントを表示する

Question

Nick Carroll のメソッドhereを使用して、アプリに Django ajax コメント送信を実装しました。サーバーが受信して保存した後、コメントを投稿したユーザー、投稿日、コメントをajaxを使用してページに表示してほしい。これを行う良い方法は何ですか？

Answer 1

jquery の post メソッドを使用してコメントをサーバーに投稿し、応答が成功すると、成功のコールバック関数からページにコメントを表示します。

Answer 2

わかりました、これは一種のハッカー的な方法ですが、私はまともな解決策を見つけたと思います:

<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>

私はJavaScriptに比較的慣れていないので、これを私が知っていることと一緒にまとめました。これをクリーンアップできると思われる場合は、遠慮なくコメントを残してください。

Answer 3

<script type="text/javascript" charset="utf-8">
    function bindPostCommentHandler() {
        $('#comment_form form input.submit-preview').remove();
        $('#comment_form form').submit(function() {
            $.ajax({
                type: "POST",
                data: $('#comment_form form').serialize(),
                url: "{% comment_form_target %}",
                cache: false,
                dataType: "html",
                success: function(html, textStatus) {
                    $('#comment_form form').replaceWith(html);
                     $('.comt_message').show();
                    bindPostCommentHandler();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('#comment_form form').replaceWith('Your comment was unable to be posted at this time.  We apologise for the inconvenience.');
                }
            });
            return false;
        });
    }

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