Add Ajax Hooks and Call from Custom Template PHP

Question

I'm trying to create the hooks and function for the php to receive my ajax call and when the response is alerted, all I receive is 0.

I suppose my question is, are the add_action hooks supposed to go into the bottom of the admin-ajax.php file or are they supposed to go elsewhere? Keep in mind that my Ajax request is on a custom template .php file.

Here's the code for reference:

add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );

function my_ajax_action_callback(){

echo "Baffles";

$first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
$last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
?>
<p>Hello. Your First Name is <?php echo $first_name; ?>.</p>
<p>And your last name is <?php echo $last_name; ?>.</p>
<?php
die(); // required. to end AJAX request.

}

Jquery/Ajax Request

jQuery(document).ready(function () {

$.ajax({
    type: 'POST',
    url: '../wp-admin/admin-ajax.php',
            data: {
        action     : 'my_ajax_action', // load function hooked to: "wp_ajax_*" action hook
        first_name : 'John',           // PHP: $_POST['first_name']
        last_name  : 'Cena',           // PHP: $_POST['last_name']
        }, success: function (result) {

       alert(result);
    },
    error: function () {
        alert("error");
    }
});

});

Answer 1

may be here is the error

add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );

change to

add_action( 'wp_ajax_my_ajax_action_callback', 'my_ajax_action_callback' );
add_action('wp_ajax_nopriv_my_ajax_action_callback','my_ajax_action_callback' );

and in ajax change:

action : 'my_ajax_action_callback

go to functions.php and add:

require(dirname(__FILE__) . '/custom_template.php');   

make sure your ajax url is correct!!

Answer 2

Here's what's worked for me. I'm still trying to figure out how to output the php results into an array so that they can be stored in the select element. I'll update this when I get it figured out.

function add_ajaxurl_cdata_to_front(){ ?>
<script type="text/javascript">
    ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>'
</script>

<?php }
 add_action( 'wp_head', 'add_ajaxurl_cdata_to_front', 1);
 add_action( 'wp_footer', 'add_js_to_wp_footer' );
  function add_js_to_wp_footer() { ?>
    <script type="text/javascript">
      jQuery("#field_6_17 select").on('change', function() {

       var product_line = jQuery(this).val();

        jQuery.ajax({
         type: 'POST',
         url: ajaxurl,
         data: {
          "action": "view_site_description",
          first_name : 'John',           // PHP: $_POST['first_name']
          last_name  : 'Cena',
         }, success: function(data){

          console.log('product_line');
          jQuery('select#input_6_26 option').html(data);
        }
    });
    return false;
});
</script>
<?php } 
  function view_site_description(){
  global $wpdb;

  $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
  $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
  ?>
  <p>Hello. Your First Name is <?php echo $first_name; ?>.</p>
  <p>And your last name is <?php echo $last_name; ?>.</p><?php

  die();
  }
  add_action( 'wp_ajax_view_site_description', 'view_site_description' );
  add_action( 'wp_ajax_nopriv_view_site_description', 'view_site_description' );