Setup Comment Submission Without Page Reload in WordPress

Web applications using AJAX can asynchronously send data and retrieve data from a server without interfering with the display of existing page. AJAX stands for Asynchronous JavaScript And XML. AJAX combines several programming tool including HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet), JavaScript, XML (Extensible Markup Language), DOM (Document Object Model) and Microsoft Object XML HttpRequest. Operations are asynchronous if they operate independently of other process. So the web pages with AJAX don’t have to reload to send info to server. This is done by XMLHTTPRequest Object, which is efficiently an interface that allow scripts to perform AJAX request. This article shows steps to setup comment submission without page reload in WordPress.

The default comment submission process in WordPress reloads the entire page. The time-consuming reloading process for a simple task like commenting can degrade the user experience for your website. If reloading while commenting is troubling your visitors then AJAX can be your solution. Ajax is a wonderful technology that can communicate with server without any reloading of page. So, submitting and updating of comments becomes quicker and faster. Using Ajax in WordPress can largely improve the performance of your website. You can improve reader experience by adding Ajaxify functionality in comment section.

Why Ajaxify?

  • Ajax is based in open standards that can support cross platform and cross browser.
  • Ajax increases efficiency and usability of comments in WordPress.
  • Faster response to user and increases user experience.
  • AJAX reduces server resource since there is no reloading.
  • It is a time-saver.

If you are looking for a way to integrate your website comments with the power of AJAX, you can use the following techniques.

Setup Comment Submission Without Page Reload in WordPress

You need to have access to your theme folder to perform this task. Find comment.php file in the theme folder and at the very end of everything of the file copy and paste the following code. You have to be extra cautious not to spoil any other existing codes in the file.

<script>
    jQuery('document').ready(function($) {
        // find the comment form and store it ina variable
        var commentform = $('#commentform');
        // Add a status message
        commentform.prepend('<div id="comment-status"></div>');
        // Define 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>

After you save the file, your comments will be Ajaxified and will be posted without any reloads.

AJAXify comments with Plugins.

Since editing your theme folder and dealing with codes is a tedious task, you can use various plugins that can add the same functionality easily. Here are a few plugins you can try out.

1. WP Ajaxify Comments

Setup Comment Submission Without Page Reload in WordPress

The plugin hooks into your comment form and adds AJAX functionality. The good thing is it removes the page reloads required when validating, posting or updating comments. It also gives a option to refresh the comments without reloading page. Form validation process is easy and errors on the comment form can be corrected instantly without reload.

Also Read:   Setup AccessPress Social Share Plugin in WordPress

Install the plugin with regular plugin installation process. After activation you can view the plugins setting page on the path Settings > WP Ajaxify Comments. In the settings page, you need to enable the plugin and mention comment selectors. There is a long list of settings that you will need to configure. After saving the settings you will have a fully ajaxified comment section.

2. Ajaxify WordPress Site

Setup Comment Submission Without Page Reload in WordPress

The plugins will add ajaxify function not only to the comments but various other parts of your website too. Ajaxify WordPress Site will load posts, pages, search, header, sidebar, footer sections etc without reloading the entire page. Ajaxify WordPress Site gives dynamic urls which make your website SEO friendly. First you have to install and activate the Ajaxify WordPress Site (AWS) plugin and then fill up the option form.

Setup Comment Submission Without Page Reload in WordPress

In the setting page you need to provide the class and id of items that you want or don’t want to be ajaxified. After correctly filling up the setting page, your plugin is ready to ajaxify the sections of your website that you have mentioned in the setting page.

AJAXify comments with Third party commenting system

You can also replace native WordPress commenting system with a third party solution like Disqus or Livefyre. Apart from auto integrated Ajax system, these third party commenting system is loaded with useful features like cross-platform, comprehensive comment managing backend, spam control, blacklist/ whitelist management, integration with social media, theme customization and much more.

Ajax is a wonderful technology that every website should embrace. I hope this article helped you to integrate the wonder AJAX in your WordPress comment.

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post