¿Cómo puedo ejecutar AJAX en un evento de clic de botón?

Question

¿Cómo puedo ejecutar AJAX en un evento de clic de botón?

27 jul 2011, 19:57:14

Vistas: 31.4K

Votos: 7

Actualización: Logré hacer funcionar el AJAX, pero no en el evento de clic. Actualicé la pregunta para que coincida con esto.

Estoy probando un código que encontré en la página: 'AJAX en Plugins'.

Sin embargo, no puedo hacer que funcione y no sé realmente por dónde empezar a buscar. Funciona cuando elimino la función de clic y simplemente ejecuto el código al cargar la página.

Tengo un archivo Javascript que se ve así:

jQuery(document).ready(function(){
    jQuery("#createremotesafe").click(function(){
        alert ('prueba');
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // desde 2.8 ajaxurl siempre está definido en el encabezado del admin y apunta a admin-ajax.php

        jQuery.post(ajaxurl, data, function(response) {
            alert('Esto es lo que obtuve del servidor: ' + response);
        });
    });    
});

y en algún lugar de mi script PHP que genera el botón que debería ejecutar el Javascript (es decir, la página de administración), y también el resto de la página:

add_action('wp_ajax_my_action', 'my_action_callback');
echo 'prueba2';
function my_action_callback() {
    global $wpdb; // así es como obtienes acceso a la base de datos
    $whatever = $_POST['whatever'];
    $whatever += 10;
    echo $whatever;
    die(); // esto es necesario para devolver un resultado apropiado
}

Obtengo tanto el Alert ('prueba') como el echo 'prueba2', pero no la alerta de respuesta. No hay errores de Javascript ni nada. Mi código definitivamente se está ejecutando, ya que puedo ver ambas 'pruebas', pero ¿por qué AJAX no está obteniendo ninguna respuesta? ¿Mi función php desaparece después de cargar la página? ¿Tal vez no puedo/no debo usar las funciones AJAX incorporadas de wp?

Tampoco muestra un cuadro de alerta vacío, simplemente no sucede nada.

joon

199

desarrollo de plugins javascript ajax

Comentarios

Dos cosas: 1) ¿Está definida y es correcta ajaxurl? 2) ¿Dónde estás viendo que ocurra echo 'test2'?

Ryan Kinal

27 jul 2011 20:15:58

1) sí (lo verifiqué), 2) antes de cualquier contenido de la página de administración, justo en la parte superior.

joon

27 jul 2011 20:26:25

Estás mezclando variables de jQuery, deberías usar un envoltorio no conflictivo.

t31os

27 jul 2011 21:24:46

Mark, gracias, no sabía esto. Sin embargo, esto no cambió mucho, los resultados son los mismos

joon

28 jul 2011 15:02:59

Respuesta añadida, por favor comenta con respecto a la pregunta que planteé dentro de mi respuesta.

t31os

28 jul 2011 16:30:29

Todas las respuestas a la pregunta

Comentarios

Funciona hasta que intento agregar el Javascript a un evento de clic en un botón en lugar de a la carga de la página. El código se ejecuta, porque obtengo la alerta, pero probablemente la función Ajax desaparece después de la carga de la página.

joon

28 jul 2011 18:29:05

Antes estabas mezclando variables, funciona perfectamente con una función de clic, mira mi código actualizado arriba (ejemplo funcional).

t31os

28 jul 2011 18:50:08

Parece que me faltó algo de código en el ejemplo actualizado, le falta add_action( 'in_admin_header', 'my_ajax_button' ); al principio del código, para tu información.

t31os

28 jul 2011 19:58:27

Lo conseguí funcionar siguiendo tu consejo, gracias. Aunque es extraño que recibí ambos mensajes de 'prueba' y el código no funcionaba, porque no puedo imaginar qué estoy haciendo diferente ahora mismo.

joon

29 jul 2011 14:16:06

Como dije inicialmente, creo que fue solo un caso de mezclar variables de jQuery, deberías estar bien usando el enfoque sin conflicto que publiqué arriba (cualquier cosa dentro de esa función document ready puede usar $ de forma segura). Contento de haber ayudado.. ;)

t31os

29 jul 2011 15:41:02

t31os 18.7K · Accepted Answer · 2011-07-28T16:11:50Z

Comienza desde una base de código funcional...

add_action('in_admin_header', 'my_ajax_button');

function my_ajax_button() {
    echo '<a href="#ajaxthing" class="myajax">Prueba</a>';
}

add_action('admin_head', 'my_action_javascript');

function my_action_javascript() {
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

    $('.myajax').click(function(){
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // desde la versión 2.8 ajaxurl siempre está definido en el encabezado de administración y apunta a admin-ajax.php
        $.post(ajaxurl, data, function(response) {
            alert('Respuesta del servidor: ' + response);
        });
    });


});
</script>
<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');

function my_action_callback() {
     global $wpdb; // así es como obtienes acceso a la base de datos

     $whatever = $_POST['whatever'];

     $whatever += 10;

             echo $whatever;

     exit(); // esto es necesario para devolver un resultado adecuado & exit es más rápido que die();
}

Ese es el código (con un ajuste menor) de la página del codex, y funciona perfectamente para mí, así que sugiero usarlo como punto de partida... si eso es lo que hiciste inicialmente, ¿en qué punto dejó de funcionar?

NOTA: Mark soy yo, uso una cuenta secundaria cuando accedo al sitio desde otra PC (que no es la mía).