How to jQuery Ajax show new data from successful insert?

Question

I write messages into my db table with jQuery Ajax form post like this:

functions.php

add_action('wp_ajax_send_projectmessage', 'send_projectmessage');
function send_projectmessage() {
    global $wpdb;
    $wpdb->insert( //insert stuff to db table));

    wp_send_json_success();    
}

JS:

$('#form-pm').on('submit',function(e) {

        var mydata = { 
            'action': 'send_projectmessage',
            'projectid': projectid,  
            'message': message
        };

        var ajaxRequest =
        $.ajax({
            url: admin_ajax.ajax_url,
            type: 'post',
            data: mydata
        });

        ajaxRequest.done(function(data) { console.log(data); });
        ajaxRequest.fail(function(jqXHR) { alert(jqXHR); });

        e.preventDefault();
});

Everything works fine, data gets inserted into my database table.

Now, this is how I display the messages:

<div id="messages">
    <?php
    $messages = load_projectmessages($projectid);

    foreach ($messages as $message) {
    //make a <table><tr><td> with $message->themessage
    }
    ?>
</div>

<form id="form-pm>
    <!-- input fields and submit here -->
</form>

load_projectmessages is in the same functions.php:

function load_projectmessages($projectid) {
    global $wpdb;
    $sql_displaymessages = $wpdb->prepare("sql stuff", $projectid );
    $projectmessages = $wpdb->get_results($sql_displaymessages);
    return $projectmessages;
    wp_die();
}

My question is, where/when do I call load_projectmessages? Should I modify my whole JS ajax code to also do the displaying of new data?

Answer 1

Modify your code as follows:

add_action('wp_ajax_send_projectmessage', 'send_projectmessage');
function send_projectmessage() {
    global $wpdb;
    $wpdb->insert( //insert stuff to db table));

    // Call your function to retrieve your data and send it to browser
    $messages = load_projectmessages($projectid);

    wp_send_json_success($messages);    
}

Display data through JS by modifying this

ajaxRequest.done(function(data) { console.log(data); });

to this

ajaxRequest.done(function(data) { 
    // Put markup for retrieved data here
    // for example 

    var o = "<table><tr><td>Project ID</td><td>Message</td></tr>";

    for (i=0; i<=data.length; i++){
        o .=  "<tr><td>"+data.projectid+"</td><td>"+data.message"+</td></tr>";
    }

    o .=   "</table>";

    $(#messages).html(o); 

 });

Also make sure that your function return an array instead of an OBJECT, so modify it as follows:

function load_projectmessages($projectid) {
    global $wpdb;
    $sql_displaymessages = $wpdb->prepare("sql stuff", $projectid );

    // Add ARRAY_A to get result in an associative array
    $projectmessages = $wpdb->get_results($sql_displaymessages, ARRAY_A);
    return $projectmessages;

    // Not needed
    // wp_die();
}

I hope this will help.

Answer 2

You can use wp_send_json_success to send messages back to the jQuery. The function accepts $data parameter that can basically be anything - plain text string, html, array.

So you could use your messages function inside your ajax insert function and have it send all the messages back to jQuery everytime. Or have the insert respond with only a (success) message related to that particular insert.

You could also add some kind of error handling to your insert function and have it do wp_send_json_error if something goes south during the insert.