En este artículo, estudiamos cómo implementar jQuery Ajax en WordPress tomando un ejemplo de formulario.
¿Por qué necesita jQuery Ajax en el sitio web?
Ajax (JavaScript y XML asíncronos) permite que una página web se actualice de forma asincrónica. Significa que los datos pueden enviarse y recuperarse de un servidor de forma asincrónica sin interferir con la visualización y el comportamiento de la página existente. Con Ajax, puede cambiar partes pequeñas o grandes de una página web sin actualizar toda la página. Ayuda a mejorar la experiencia del usuario y al mismo tiempo ahorra una carga adicional en el servidor.
Ajax se vuelve extremadamente popular en el desarrollo web. La mayoría de los sitios web prefieren usar Ajax para cargar el contenido de forma dinámica. En el desarrollo web para algunas tareas, debe tener que usar Ajax sin ninguna segunda opción.
Dicho esto, veamos cómo usar jQuery Ajax en WordPress.
Empezando
Implementar Ajax en WordPress es fácil y sencillo. Veremos un ejemplo práctico de ello.
Como ejemplo, vamos a crear un select desplegable de países y estados. Cuando el usuario selecciona un país del menú desplegable, todos los estados asignados al país seleccionado deben completarse en el menú desplegable de estado. Este comportamiento debe ser realizado por Ajax.
Para lograrlo, necesitará 2 tablas: wp_pais y wp_ciudades . En estas tablas, debe mantener la relación de uno a muchos entre el país y las ciudades. Consulte el código a continuación.
Tabla wp_paises
CREATE TABLE IF NOT EXISTS `paises` (
`id` int(11) NOT NULL,
`name` varchar(255) DEFAULT NULL,
`continente_id` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
INSERT INTO `paises` (`id`, `pais`, `activo`) VALUES
(1, 'España', 1),
(2, 'Francia', 1),
(3, 'Italia', 1);
ALTER TABLE `paises`
ADD PRIMARY KEY (`id`);
Tabla wp_Ciudades
CREATE TABLE IF NOT EXISTS `ciudades` (
`id` int(11) NOT NULL,
`ciudad` varchar(255) DEFAULT NULL,
`pais_id` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
INSERT INTO `paises` (`id`, `ciudad`, `pais_id`) VALUES
(1, 'Madrid', 1),
(2, 'Valencia', 1),
(3, 'Sevilla', 1),
(4, 'Paris', 2),
(5, 'Venecia', 3),
(6, 'Roma', 3);
ALTER TABLE `paises`
ADD PRIMARY KEY (`id`), ADD KEY `pais_id` (`pais_id`);
Una vez que esté listo con los datos, cree el select desplegable de países obteniendo los datos de la tabla de países de la siguiente manera.
<?php
global $wpdb;
$aPaises = $wpdb->get_results( "SELECT id, pais FROM ".$wpdb->prefix."paises" WHERE activo = '1' );
<form method="post">
<select class="paises">
<option value="">--<?php _e('Selecciona un Pais'); ?>--</option>
<?php foreach ($aPaises as $pais) { ?>
<option value="<?php echo $pais->id; ?>"><?php echo $pais->pais; ?></option>
<?php } ?>
</select>
<div class="load-ciudad"></div>
</form>
?>
Hemos agregado la clase ‘países’ a la etiqueta de selección que se usará en el código jQuery para obtener la identificación de un país. También agregué un div vacío con la clase ‘load-ciudad’ al que se agregara el select desplegable de ciudades después de recibir una respuesta de la llamada Ajax.
jQuery Ajax en WordPress
A continuación, necesitamos escribir un código jQuery que dé una llamada Ajax al servidor y maneje la respuesta. Para escribir una llamada Ajax, debes incluir el archivo JS. Crea un custom.jsarchivo dentro del jsdirectorio de tu tema activo. Agregue esto custom.jsen el entorno de WordPress usando el siguiente código que va dentro functions.php.
function blog_scripts() {
// Registro de script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localizar el script con nuevos datos
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_paises' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Script en cola con datos localizados.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );
Ahora, escribamos un código jQuery que generé una llamada Ajax y agreguemos el select desplegable de las ciudades a la página.
custom.js
jQuery(function($) {
$('body').on('change', '.ciudades', function() {
var ciudadid = $(this).val();
if(ciudadid != '') {
var data = {
'action': 'get_paises_by_ajax',
'ciudad': ciudadid,
'security': blog.security
}
$.post(blog.ajaxurl, data, function(response) {
$('.load-pais').html(response);
});
}
});
});
Aquí, declaré una datavariable que contiene una actionclave. El valor de la cadena para la actionclave debe estar orientado a la tarea.
Estamos obteniendo ciudades, así que mantengo su nombre como get_ciudades_by_ajax. Otros elementos de la datavariable son los detalles que se deben enviar a las solicitudes de Ajax. Nuestro objetivo es obtener un estado basado en el país, por lo que paso la identificación del país con la clave como ciudad.
Ahora es el momento de ejecutar llamadas Ajax en forma de WordPress. Agregue las siguientes 2 declaraciones en el functions.phparchivo de su tema activo .
add_action('wp_ajax_get_ciudades_by_ajax', 'get_ciudades_by_ajax_callback');
add_action('wp_ajax_nopriv_get_ciudades_by_ajax', 'get_ciudades_by_ajax_callback');
‘wp_ajax’ es un prefijo fijo al usar Ajax en WordPress. Luego, agregue el valor de la acción. En nuestro caso es get_states_by_ajax. Entonces, el primer parámetro se convirtió en wp_ajax_get_states_by_ajax. El segundo parámetro es una función de devolución de llamada en la que tenemos que escribir nuestro código real del lado del servidor. Se debe usar ‘wp_ajax_nopriv’ cuando se realizan operaciones para la interfaz.
En el get_ciudades_by_ajax_callbackmétodo, escriba el código que devolverá el menú desplegable de estado. Puede definir este método en el functions.phparchivo.
function get_ciudades_by_ajax_callback() {
check_ajax_referer('load_ciudades', 'security');
$country = $_POST['ciudad'];
global $wpdb;
$aCiudades = $wpdb->get_results( $wpdb->prepare( "SELECT id, ciudad FROM ".$wpdb->prefix."ciudades WHERE cid = %d", $ciudad) );
if ($aCiudades) {
?>
<select>
<?php
foreach ($aCiudades as $city) {
?>
<option value="<?php echo $city->id; ?>"><?php echo $city->ciudad; ?></option>
<?php
}
?>
</select>
<?php
}
wp_die();
}
La respuesta incorporada en el código lo enviará de vuelta a jQuery. Luego agregamos esta respuesta usando jQuery al contenedor div que tiene la clase ‘load-ciudad’.
Vas a tu página y elige el país. Deberías ver que aparece el select desplegable de ciudad para el país que has seleccionado.
Como has visto, ya tienes creado un formulario con selects dependientes en wordpress de forma sencilla usando jquery y ajax que puedes darle mil usos en tus formularios web.
