ccc

Ajax en Wordpress

Lo primero de todo es añadir en nuestro functions.php cuando cargamos nuestro propio js indicar también la ruta de una variable para acceder al fichero admin-ajax.php:
function lsg_insertar_js(){
    wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/lsg.js', array('jquery'), '1.0', true );
    wp_enqueue_script('miscript');

    wp_localize_script('miscript','lsg_vars',['ajaxurl'=>admin_url('admin-ajax.php')]);
}
add_action("wp_enqueue_scripts", "lsg_insertar_js");

En nuestro fichero lsg.js creamos la función a la que va a llamar el ajax:
(function($){
$(document).on('click','#btnPruebaAjax',function(e){
e.preventDefault(); // para que no haga el href

$.ajax({
url : lsg_vars.ajaxurl,
type: 'post',
data: {
action: "hacerAlgo"
},
beforeSend: function(){

},
success: function(result){
$("#btnPruebaAjax").text(result);
}
});
});
})(jQuery);

Y de nuevo en el fichero functions.php creamos esa función asociadas al ajax que deben tener estos prefijos:
add_action('wp_ajax_nopriv_hacerAlgo','hazAlgo');
add_action('wp_ajax_hacerAlgo','hazAlgo');
function hazAlgo() {
    echo "En un país multicolor nació una abeja bajo el sol";
    wp_die();
}

Para probarlo por ejemplo nos creamos una nueva página en el admin del wordpress y le metemos un botón por ejemplo con este código:
<div class="wp-block-button alignright" id="btnPruebaAjax"><a class="wp-block-button__link has-text-color has-very-light-gray-color has-background has-vivid-red-background-color" href="javascript:void(0);">pulsa este botón</a></div>

Al hacer click al botón llamará al ajax.

No hay comentarios:

Publicar un comentario