提交后显示评论

Question

In my wordpress site I've got a standard comment submit form. I've added a script to it (ajax) so I don't have to reload the page to submit comment. Everything is working but how to show the submited comment without refreshing the page?

My code:

jQuery('document').ready(function($){  
var commentform=$('form#commentform');  
commentform.prepend('<div id="wdpajax-info" ></div>');  
var infodiv=$('#wdpajax-info');  
commentform.validate({  
    submitHandler: function(form){  
        var formdata=commentform.serialize();  
        infodiv.html('<p>Proszę czekać...</p>');  
        var formurl=commentform.attr('action');  
        $.ajax({  
            type: 'post',  
            url: formurl,  
            data: formdata,  
            error: function(XMLHttpRequest, textStatus, errorThrown){  
                infodiv.html('<p class="wdpajax-error" >Sprawdź wszystkie pola!</p>');  
            },  
            success: function(data, textStatus, html){
                $("ul.commentlist").append(formdata);
                $("ul.commentlist li:last").fadeIn("slow");
                if(data=="success")  
                    infodiv.html('<p class="wdpajax-success" >Dzięki, komentarz został dodany!</p>');  
                else  
                    infodiv.html('<p class="wdpajax-error" >Błąd</p>');  
                commentform.find('textarea[name=comment]').val('');  
            }  
        });  
    }  
  });  
});

Answer 1

I would recommend refreshing the page so the user can see that the comment has really been saved on the server side. If you still want to do it without refreshing the page you should add a new div with the comment. Something similar to this:

success: function(data, textStatus, html){
            $("ul.commentlist").append(formdata);
            $("ul.commentlist li:last").fadeIn("slow");
            if(data=="success")  {
              infodiv.html('<p class="wdpajax-success" >Dzięki, komentarz został dodany!</p>');  
              // you should inicialize commentdiv with the selector of the part of the page you want to show the comment
              commentdiv.html('<p class="comment">'+formdata+'</p>');
}