AJAX submit WordPress comments without reloading page

3 minutes read

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.

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

Related Posts:

There are times when you need to disable comments on your WordPress site. There are two cases contextual to disabling WordPress comments: Disabling comments for individual posts and pages Disabling comments completely Disabling comments for individual WordPr...
To remove spam comments from a pending list in WordPress, follow these steps:Log in to your WordPress dashboard.Click on &#34;Comments&#34; in the left-hand menu.In the Comments section, you will see a list of all pending comments.To identify spam comments, lo...
AJAX (Asynchronous JavaScript and XML) is a technique used to send and receive data from a server without reloading the whole webpage. In October CMS, AJAX is commonly used to create dynamic and interactive user interfaces.To use AJAX in October CMS, you can f...