Ajax comments not working

时间:2012-09-08 作者:Nimbuz

我遵循了“ajaxify”wordpress评论的教程,其中不会重新加载页面:

jQuery(\'document\').ready(function ($) {
    $(\'#commentform\').each(function () {
        var commentform = $(this); // find the comment form
        commentform.prepend(\'<div id="comment-status" ></div>\'); // add info panel before the form to provide feedback or errors
        var statusdiv = $(\'#comment-status\'); // define the infopanel

        commentform.submit(function () {
            //serialize and store form data in a variable
            var formdata = commentform.serialize();
            //Add a status message
            statusdiv.html(\'<p>Processing...</p>\');
            //Extract action URL from commentform
            var formurl = commentform.attr(\'action\');
            //Post Form with data
            $.ajax({
                type: \'post\',
                url: formurl,
                data: formdata,
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    statusdiv.html(\'<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly or your comment was too short.</p>\');
                },
                success: function (data, textStatus) {
                    if (data == "success") statusdiv.html(\'<p class="ajax-success" >Thanks for your comment. Refresh the page to see it.</p>\');
                    else statusdiv.html(\'<p class="ajax-error" >Please wait a while before posting your next comment</p>\');
                    commentform.find(\'textarea[name=comment]\').val(\'\');
                }
            });
            return false;
        });
    });
});
。。它可以工作,但只适用于它找到的第一个#commentform。在我的主页上,显示了几个帖子,每个帖子都启用了#commentform。我试过了。正如你所看到的那样,每一种都没有任何效果。

1 个回复
最合适的回答,由SO网友:Thulasiram 整理而成
<div>
    <div class="CommentList"></div>
    <form action="" class="commentForm">
        <textarea name="comment"></textarea>
        <input type="button" value="Comment" class="btnComment" />
    </form>
</div>
<div>
    <div class="CommentList"></div>
    <form action="" class="commentForm">
        <textarea name="comment"></textarea>
        <input type="button" value="Comment" class="btnComment" />
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(\'.commentForm\').each(function () {
            $(this).prepend(\'<div class="comment-status"></div>\');
        });

        $(\'.commentForm\').find(\'.btnComment:button:not(.Process)\').live(\'click\', function () {
            $(this).addClass(\'Process\').attr(\'disabled\', true);
            var commentFormObj = $(this).parents(\'form.commentForm\');
            commentFormObj.find(\'textarea[name=comment]\').val(\'\');
            var statusDivObj = $(this).find(\'.comment-status\');
            statusDivObj.html(\'<p>Processing...</p>\');
            $.ajax({
                url: commentFormObj.attr(\'action\'), type: \'Post\', dataType: \'json\',
                data: commentFormObj.serialize(),
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    statusDivObj.html(\'<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly or your comment was too short.</p>\');
                },
                success: function (data, textStatus) {
                    if (data == "success")
                        statusDivObj.html(\'<p class="ajax-success" >Thanks for your comment. Refresh the page to see it.</p>\');
                    commentFormObj.find(\'.btnComment:button\').removeClass(\'.Process\').attr(\'disabled\', false);
                }
            });
        });
    });
</script>
结束

相关推荐

JQuery Slider-类似于www.interetmarket inginc.com

我希望为Wordpress的JQuery滑块添加一些功能。我希望这两种导航样式都像以前一样http://www.internetmarketinginc.com/.我不知道如何将元数据(幻灯片标题)和点导航联系在一起。如果我需要提供更多信息,请告诉我。提前谢谢。杰里米