Llamada Ajax en el front-end de WordPress

En mi plugin estoy usando dos llamadas ajax en el back-end que funcionan bien. Pero para proporcionar la misma funcionalidad en el front-end cargué una copia de estas dos funciones con otros nombres y mi código es:

En mi archivo principal del plugin:

function my_action_callback(){
  global $wpdb; 
  if (@$_POST['id']) {
    
    $daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject  from " . WP_eemail_TABLE . " where 1=1 and eemail_status='YES' and eemail_id=" . $_POST['id']);
    //consulta para seleccionar datos del email de la tabla
    
    if (!empty($daty)) {
        foreach ($dat as $datt) {
            echo $datt->eemail_content . "_" . $datt->eemail_subject;
            die();
        }
    }
  } 
}
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

Y en mi settings.js

function showEntryfront(id)
{
    jQuery(document).ready(function($) {
        var data = {
            action: 'my_action',
            id: id
        };

        jQuery.post(ajaxurl, data, function(response) {
            //Obtener respuesta del servidor
            var n=response.split("_");  
            jQuery('textarea#mail_contents').text(n[0]);
            $('#mail_subject').val(n[1]);
        });
    });
}

Y la página del plugin que ejecuta showEntryfront() es:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
    <option value="">Seleccionar asunto del email</option>
    <?php echo $eemail_subject_drop_val; ?>
</select>
<input type="hidden" name="send" value="" id="send" /> </td>
<tr height="60px;"> <td>
    <textarea name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>
</td></tr>

La segunda función hace lo mismo, solo que la tabla de base de datos es diferente.

Mi consola de Firebug muestra:

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {

Y el textarea no se está llenando con los datos de la tabla WP_eemail_Table. Ten en cuenta que esta funcionalidad funcionaba en el backend de wp-admin. Sé que la llamada ajax en admin se cargará automáticamente por admin-ajax.php, pero ¿cómo puedo implementar lo mismo en el front-end? ¿Hay algún error en mi código?

Para solucionar esto, necesitas definir ajaxurl en el front-end. Agrega esto en el archivo principal de tu plugin:

function add_ajax_script() {
    wp_localize_script('jquery', 'my_ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'add_ajax_script');

Y modifica tu JavaScript para usar my_ajax_object.ajax_url en lugar de ajaxurl:

jQuery.post(my_ajax_object.ajax_url, data, function(response) {
    // tu código aquí
});