Wordpress AJAX echo on button click

Question

In functions.php I have code which I would like to make echo some content (for now 'test', ultimately customer order details entered in different DIV of the same page) on button click. This is my custom button which doesn't reload page. Unfortunately there is no success alert, unless I remove echo 'test'; from my function.

add_action('wp_ajax_nopriv_order_summary_data', 'order_summary_data');
add_action('wp_ajax_order_summary_data', 'order_summary_data');
function order_summary_data() {
    echo 'test';
}

add_action('wp_footer', 'taisho_breadcrumb_interaction');
function taisho_breadcrumb_interaction() {
    if( !(is_cart() || is_checkout()) ) return; // Cart and checkout page only  
    ?>
        <script type="text/javascript">         

        var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";

        jQuery(document).ready(function($){             

            $('.c-step-3, .ch-step-2 .wc-forward').click(function(){            

                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: ajax_url,
                    data: {action: 'order_summary_data'},
                    success: function(response){
                        alert("Order data successfully fetched.");                      
                    }
                });                         
                return false;
            });

        }); 
        </script>
    <?php
}

Answer 1

Please add die(); after you echo 'test';

add_action('wp_ajax_nopriv_order_summary_data', 'order_summary_data');
add_action('wp_ajax_order_summary_data', 'order_summary_data');
function order_summary_data() {
    echo 'test';
    die();
} 

add_action('wp_footer', 'taisho_breadcrumb_interaction');
function taisho_breadcrumb_interaction() 
{
    if( !(is_cart() || is_checkout()) ) return; // Cart and checkout page only  
?>
<script type="text/javascript"> 
 jQuery(document).ready(function($){ 

     $('.c-step-3, .ch-step-2 .wc-forward').click(function(){ 
            var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
            var data = {
                            action: 'order_summary_data',
            };
            $.post(ajaxurl,data,function(res)
            {
                    alert(res);

            });
        });
    });

</script>
    <?php
}

Answer 2

If I were you, I would handle the message setup in the backend. This has the advantage, that you can use message ID's or an other way to store your success message. For example you can add a custom settings page to the WordPress backend which has a field. In this field you can write your message and read it again in the function which returns the success.

In my eyes this is the best solution. This is your code with a hardcoded return message. My idea above is just a thing you should keep in mind:

add_action( 'wp_ajax_nopriv_order_summary_data', 'order_summary_data' );
add_action( 'wp_ajax_order_summary_data', 'order_summary_data' );
function order_summary_data() {

    //Add success message to data array
    $data = array(
        'message' => 'Order data successfully fetched.',
    );

    //Setup response array, pass data and return everything to the AJAX call
    $response = array( 'success' => true, 'data' => $data );
    wp_send_json_success( $response );
    wp_die();
}

add_action( 'wp_footer', 'taisho_breadcrumb_interaction' );
function taisho_breadcrumb_interaction() {
    if ( ! ( is_cart() || is_checkout() ) ) {
        return;
    } // Cart and checkout page only
    ?>
    <script type="text/javascript">

        var ajax_url = "<?php echo admin_url( 'admin-ajax.php' ); ?>";

        jQuery(document).ready(function ($) {

            $('.c-step-3, .ch-step-2 .wc-forward').click(function () {

                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: ajax_url,
                    data: {action: 'order_summary_data'},
                    function(data) {
                        if (data.success) {
                            alert(data.message);
                        }
                    }
                });
                return false;
            });

        });
    </script>
    <?php
}

If you want to use the AJAX success function, you can remove the 'success' => true and replace it whit just true:

$response = array( true, 'data' => $data );

Finally you need to change your AJAX function a bit:

$.ajax({
    type: 'post',
    dataType: 'json',
    url: ajax_url,
    data: {action: 'order_summary_data'},
    success: function (data) {
        alert(data.message);
    }
});

So you have to decide which one you would like to use.

Answer 3

Since you are sending a dataType: 'json' in the request you should make use of the wordpress wp_send_json function. Below is the updated code that utilizes the mentioned function:

<?php
add_action('wp_ajax_nopriv_order_summary_data', 'order_summary_data');
add_action('wp_ajax_order_summary_data', 'order_summary_data');
function order_summary_data() {
    $return_data = array('data' => 'Testing');
    wp_send_json($return_data);
    exit;
}

add_action('wp_footer', 'taisho_breadcrumb_interaction');
function taisho_breadcrumb_interaction() {
    if( !(is_cart() || is_checkout()) ) return; // Cart and checkout page only  
    ?>
        <script type="text/javascript">         

        var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";

        jQuery(document).ready(function($){             

            $('.c-step-3, .ch-step-2 .wc-forward').click(function(){            

                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: ajax_url,
                    data: {action: 'order_summary_data'},
                    success: function(response){
                        console.log(response.data);
                        alert("Order data successfully fetched.");                      
                    }
                });                         
                return false;
            });

        }); 
        </script>
    <?php
}