How to use ajax to post wordpress comments?

Question

i am building a wordpress theme and in that i have a custom contact form which stores data in a custom post type Messages when a user fills that form and submit it.

here is the code below

Contact-form.php

<form id="salmanlateefContactForm" class="salmanlateef-contact-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">

<div class="form-group">
    <input type="text" class="form-control salmanlateef-form-control" placeholder="Your Name" id="name" name="name" required="required">
    <small class="text-danger form-control-msg">Your Name Is Required</small>
</div>

<div class="form-group">
    <input type="email" class="form-control salmanlateef-form-control" placeholder="Your Email" id="email" name="email" required="required">
    <small class="text-danger form-control-msg">Your Email Is Required</small>
</div>

<div class="form-group">
    <textarea name="message" id="message" class="form-control salmanlateef-form-control" required="required" placeholder="Your Message"></textarea>
    <small class="text-danger form-control-msg">A Message Is Required</small>
</div>

<div class="text-center">
    <button type="submit" class="btn btn-default btn-lg btn-salmanlateef-form">Submit</button>
    <small class="text-info form-control-msg js-form-submission">Submission in process, please wait...</small>
    <small class="text-success form-control-msg js-form-success">Message successfully submitted, thank you!</small>
    <small class="text-danger form-control-msg js-form-error">There was an error while submitting the message, please try again</small>
</div>

JQuery

/* contact form submission */
$('#salmanlateefContactForm').on('submit', function(e){

    e.preventDefault();

    $('.has-error').removeClass('has-error');
    $('.js-show-feedback').removeClass('js-show-feedback');

    var form = $(this),
            name = form.find('#name').val(),
            email = form.find('#email').val(),
            message = form.find('#message').val(),
            ajaxurl = form.data('url');

    if( name === '' ){
        $('#name').parent('.form-group').addClass('has-error');
        return;
    }

    if( email === '' ){
        $('#email').parent('.form-group').addClass('has-error');
        return;
    }

    if( message === '' ){
        $('#message').parent('.form-group').addClass('has-error');
        return;
    }

    form.find('input, button, textarea').attr('disabled', 'disabled');
    $('.js-form-submission').addClass('js-show-feedback');

    $.ajax({

        url : ajaxurl,
        type : 'post',
        data : {

            name : name,
            email : email,
            message : message,
            action: 'salmanlateef_save_user_contact_form'

        },
        error : function( response ){

            $('.js-form-submission').removeClass('js-show-feedback');
            $('.js-form-error').addClass('js-show-feedback');
            form.find('input, button, textarea').removeAttr('disabled');

        },
        success : function( response ){
            if( response == 0 ){

                setTimeout(function() {
                    $('.js-form-submission').removeClass('js-show-feedback');
                    $('.js-form-error').addClass('js-show-feedback');
                    form.find('input, button, textarea').removeAttr('disabled');
                },1500);

            } else {

                setTimeout(function() {
                    $('.js-form-submission').removeClass('js-show-feedback');
                    $('.js-form-success').addClass('js-show-feedback');
                    form.find('input, button, textarea').removeAttr('disabled').val('');
                },1500);

            }
        }

    });

});

Ajax.php

add_action( 'wp_ajax_nopriv_salmanlateef_save_user_contact_form', 'salmanlateef_save_contact' );
add_action( 'wp_ajax_salmanlateef_save_user_contact_form', 'salmanlateef_save_contact' );
function salmanlateef_save_contact(){

    $title = wp_strip_all_tags($_POST["name"]);
    $email = wp_strip_all_tags($_POST["email"]);
    $message = wp_strip_all_tags($_POST["message"]);

    $args = array(
        'post_title' => $title,
        'post_content' => $message,
        'post_author' => 1,
        'post_status' => 'publish',
        'post_type' => 'salmanlateef_contact',
        'meta_input' => array(
            '_contact_email_value_key' => $email
        )
    );

    $postID = wp_insert_post( $args );

    if ($postID !== 0) {
        $to = get_bloginfo( 'admin_email' );
        $subject = 'Salman Lateef Contact Form - '.$title;

        $header[] = 'From: '.get_bloginfo( 'name' ).' <'.$to.'>';
        $header[] = 'Reply-To: '.$title.' <'.$email.'>';
        $header[] = 'Content-Type: text/html: charset=UTF-8';

        wp_mail( $to, $subject, $message, $headers );

        echo $postID;
    } else {
        echo 0;
    }

    die();

}

What i want is use the same logic to post comments to a post using comments form. Hope i am clear on the question. Looking forward for a reply. Thanks in advance

Answer 1

Since Version 2.8, The JavaScript global variable ajaxurl can be used in case you want to separate your JavaScript code from php files into JavaScript only files. This is true on the administration side only. If you are using AJAX on the front-end, you need to make your JavaScript aware of the admin-ajax.php url.

So please use admin-ajax rather than the ajaxurl in your theme.

Answer 2

$args = array(
    'comment_author' => $author,
    'comment_author_email' => $email,
    'comment_content' => $comment,
    'comment_parent' => $commentParent,
    'comment_post_ID' => $postID,
    'user_id' => $userID,
);

$commentID = wp_new_comment( $args );

if ($commentID !== 0) {
    echo $commentID;
} else {
    echo 0;
}

i used the wp_new_comment() function and it served my purpose. however i am still trying to figure out a way to append the newly generated comment into the comments list in the single.php