AJAX submit WordPress comments without reloading page

Ever thought of allowing readers of your WordPress-powered site to submit comments effortlessly and instantly without reloading the page? If so, this guide tells how to do so.

Using AJAX

AJAX or Asynchronous JavaScript is the technology that allows websites to send or request data without having to actually reload the page. The general meaning of “Asynchronous” on web is loading resources in parallel without having to deal with the general loading or re-loading in the browser.

AJAX is used on WordPress too, and we’ll be making use of the same technology for effortless comment submission on WordPress.

A plugin might be very helpful in achieving something like that, but I didn’t find any good plugins for this particular thing. Good thing is that I found a simple JavaScript code snippet that will lead us to our objective.

JavaScript code to AJAXify WordPress comments

With the traditional WordPress comments, the page reloads as soon as someone clicks the submit button in the comment form. If you too feel the need of effortless commenting on your blog, this cool jQuery AJAX snippet will submit comments on WordPress without reloading the page. You may also customize the code to display custom status message when someone submits the comment on your blog.

Note: Before anything, make sure you have backed-up everything (i.e. your WordPress theme). Also, your theme should be using jQuery for this to work.

Implementation

Just copy and paste the below given code to the comments.php file of your WordPress theme – remember that you’ve to add this code at the end of the everything in the file.

<script type="text/javascript">
  jQuery('document').ready(function($){
    // Get the comment form
    var commentform=$('#commentform');
    // Add a Comment Status message
    commentform.prepend('<div id="comment-status" ></div>');
    // Defining the Status message element 
    var statusdiv=$('#comment-status');
    commentform.submit(function(){
      // Serialize and store form data
      var formdata=commentform.serialize();
      //Add a status message
      statusdiv.html('<p class="ajax-placeholder">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</p>');
        },
        success: function(data, textStatus){
          if(data=="success")
            statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</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;
    });
  });
</script>

Notes

• As told before, the code snippet above makes vast use of jQuery’s AJAX. Make it sure that your theme uses jQuery
• In order to customize the status messages, modify the error and success messages in the cove above to the desired messages.
• You may use classes .ajax-success and .ajax-error to style the status messages with CSS
• To customize the placeholder text, you may change “Processing” to “Submitting…” or something similar.
• To style placeholder text with CSS, use the class .ajax-placeholder

Save changes. Now, make a comment to test whether the AJAX submission is working or not. If you’re getting errors or find this solution not working for you, let me know through comments, I’ll try best to help you out.