0

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.

  • Have you hooked smsgte_admin_send() with add_action()? – Jacob Peattie Jul 24 at 3:09
  • Yes. I know that's working, because the message is being sent by admin_server_send. – Prdufresne Jul 24 at 3:53
  • What does admin_server_send() do? – Jacob Peattie Jul 24 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 Jul 24 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 Jul 24 at 8:59
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.com/a/8823995/5240159

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.