I have an HTML form that is used to send messages to a back end server. When the user clicks the send button, it triggers a javascript that makes an Ajax call to WordPress which in turn, makes an API call to the back end server to send the message. This part works flawlessly. The server then responds with a string which I want to return to the javascript to display in the form.

For some reason, I can't get the return value to javascript. I've stripped my function down to bare bones as follows:

function smsgte_admin_send() {
    check_ajax_referer('smsgte_nonce', 'security');    
    $response = admin_server_send(filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING));

    $result = array (
        //'response' => $repsonse,
        'response' => 'just a response',
    );

    return $result;
}

The admin_server_send triggers the message being sent to the server. The message reaches the server, so that's working. I was questioning the response from the server, so I just populated my result array with a random string, but the javascript never receives the string.

The javascript code is:

function smsgteAdminSend(button) {
    var message = document.getElementById("smsgte_admin_message").value;

    jQuery(document).ready(function ($) {
        var data = {
            'action': 'smsgte_admin_send',
            'message': message,
            'security': smsgte_Ajax.ajax_nonce,
        };
        jQuery.post(smsgte_Ajax.ajaxurl, data, function (response, status) {

            document.getElementById("smsgte_admin_send_response").innerHTML = response.response;

        });
    });

}

Originally, I was sending the response as a string instead of a key/value pair, but that wasn't working either. Can't help think I'm missing something simple.

I have an HTML form that is used to send messages to a back end server. When the user clicks the send button, it triggers a javascript that makes an Ajax call to WordPress which in turn, makes an API call to the back end server to send the message. This part works flawlessly. The server then responds with a string which I want to return to the javascript to display in the form.

For some reason, I can't get the return value to javascript. I've stripped my function down to bare bones as follows:

function smsgte_admin_send() {
    check_ajax_referer('smsgte_nonce', 'security');    
    $response = admin_server_send(filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING));

    $result = array (
        //'response' => $repsonse,
        'response' => 'just a response',
    );

    return $result;
}

The admin_server_send triggers the message being sent to the server. The message reaches the server, so that's working. I was questioning the response from the server, so I just populated my result array with a random string, but the javascript never receives the string.

The javascript code is:

function smsgteAdminSend(button) {
    var message = document.getElementById("smsgte_admin_message").value;

    jQuery(document).ready(function ($) {
        var data = {
            'action': 'smsgte_admin_send',
            'message': message,
            'security': smsgte_Ajax.ajax_nonce,
        };
        jQuery.post(smsgte_Ajax.ajaxurl, data, function (response, status) {

            document.getElementById("smsgte_admin_send_response").innerHTML = response.response;

        });
    });

}

Originally, I was sending the response as a string instead of a key/value pair, but that wasn't working either. Can't help think I'm missing something simple.

• ajax
• jquery

Share Improve this question asked Jul 24, 2019 at 2:57 PrdufresnePrdufresne 10711 silver badge88 bronze badges 5

• Have you hooked smsgte_admin_send() with add_action()? – Jacob Peattie Commented Jul 24, 2019 at 3:09
• Yes. I know that's working, because the message is being sent by admin_server_send. – Prdufresne Commented Jul 24, 2019 at 3:53
• What does admin_server_send() do? – Jacob Peattie Commented Jul 24, 2019 at 7:44
• @JacobPeattie, at the moment, it sends a message to the server and returns the server's response which should indicate whether or not the message was successfully sent. That part works great. It's outputting the response that fails. – Prdufresne Commented Jul 24, 2019 at 8:42
• Well then at the moment the response is sending is the same as the input, but you're trying to access response.response, but you haven't set response until after admin_server_send(), and it's only being returned, not outpit as JSON. – Jacob Peattie Commented Jul 24, 2019 at 8:59

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Returning the result array will only return to the PHP function calling it, instead you actually need to output it by echoing it, and in this case because it is an array, encoding it with JSON before outputting. So return $result becomes:

echo json_encode($result); exit;

and then add dataType to the javascript call so it can recognize the array data:

    var data = {
        'action': 'smsgte_admin_send',
        'message': message,
        'security': smsgte_Ajax.ajax_nonce,
        'dataType': 'json'
    };

See this answer for a more complete example: https://stackoverflow/a/8823995/5240159

The answer provided by @majick is the correct answer. I am posting this answer to show how I modified the code sample.

function smsgte_admin_send() {
    check_ajax_referer('smsgte_nonce', 'security');    
    $response = admin_server_send(filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING));
    echo $response;
    wp_die();
}

The javascript code was changed to:

function smsgteAdminSend(button) {
    var message = document.getElementById("smsgte_admin_message").value;

    jQuery(document).ready(function ($) {
        var data = {
            'action': 'smsgte_admin_send',
            'message': message,
            'security': smsgte_Ajax.ajax_nonce,
        };
        jQuery.post(smsgte_Ajax.ajaxurl, data, function (response, status) {

            document.getElementById("smsgte_admin_send_response").innerHTML = response;

        });
    });

}

In the question, I was sending a key/value pair because I thought jQuery was expecting an object. Since what I needed to do was echo the response, the key/value pair was unnecessary and I simply echo'd the response string.