Cuando trabajas con AJAX en WordPress, si quieres hacerlo bien, debes hacer llamadas a admin-ajax.php y desde ahí gestionar las peticiones y sus salidas. Si conocéis esta técnica, conoceréis las funciones: wp_ajax_(acción) y wp_ajax_nopriv_(acción) (de la que no encuentro una referencia directa en el Codex, es raro).
El otro día hablábamos de la serialización en PHP hablando de cómo cambiar la dirección de un sitio en WordPress. El cometido de esta función es muy parecido a JSON, es decir permitir intercambiar información manteniendo su estructura usando cadenas de texto. Si usas AJAX sabrás de lo que hablo.
Cuando trabajamos con PHP tenemos las dos opciones: serialize() y json_encode(). ¿Pero cuál es mejor? La respuesta no es una u otra, cada una de ellas tiene sus pros y sus contras, veamos:
Si trabajas o piensas trabajar a diario con este fantástico framework de JavaScript que es jQuery, más que probablemente te interese leerte esta entrada donde explicamos 8 métodos básicos de jQuery que quizás no conozcas, pero que sin lugar a dudas, deberías conocer. Esta entrada es una traducción y adaptación del original en inglés aparecido en Queness.
1. data()
El método data nos permite manejar datos de cualquier elemento del DOM de una forma segura, evitando referencias circulares y los efectos sobre la memoria de las mismas. Veamos un ejemplo:
<div data-type="page" data-hidden="true" data-options='{"name":"John"}'></div>
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";O lo que es lo mismo:
$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});Referencia completa en la documentación jQuery de data()
2. stop( [limpiarCola ], [saltarAlFinal] )
El método permite parar, la animación que está actualmente en ejecución. Es verdaderamente útil cuando manejamos imágenes.
Veamos un ejemplo de llamada:
$(this).find('img').stop(true, true).fadeOut();Referencia completa en la documentación jQuery de stop()
3. toggleClass()
Permite conmutar clases, de forma, que si el elemento tiene ya la clase, la elimina y viceversa. El siguiente código:
$('#home').toggleClass('active');Hace exactamente lo mismo que este:
if ($('#home').hasClass('active')) { $('#home').removeClass('active'); } else { $('#home').addClass('active'); }
Cuando trabajamos con aplicaciones que tienen interfaces web, sin lugar a dudas, la experiencia de usuario mejora enormemente si hacemos uso de tecnologías como AJAX que nos permiten transmisiones y recepciones asíncronas.
No se fuerzan cambios ni refrescos de pantalla y por lo tanto, la experiencia del usuario es más continua y más parecida a cómo sería en un interfaz de escritorio. Sin embargo, este tipo de tecnologías tiene un problema: si no controlamos los eventos del usuario mientras existe una carga de datos, es posible que se generen comportamientos erráticos.
Pongamos un ejemplo. Tenemos un sistema que carga una serie de datos de forma dinámica con AJAX a través de un formulario. Cuando el usuario hace la búsqueda, la carga se realiza y se le muestra. Si la carga tarda “mucho” y no se bloquea de alguna forma la posibilidad de seguir buscando, pueden aparecer resultados incoherentes (de búsquedas anteriores) o directamente fallar el sistema por sobrecarga.
¿Cuál es la solución más popular para este tipo de problemas? Utilizar una pantalla de espera. Vamos a explicar cómo hacerlo con jQuery en muy pocos pasos.
Introducción
La solución que vamos a usar, utilizará un div no opaco de color gris, que ocupará la pantalla al completo cuando se produzca una petición de tipo AJAX. El div incorporará una animación en la parte central.
El div
Deberemos situar un div que por defecto se encuentre escondido, hide, justo al comienzo de nuestro código del body. Contendrá una imagen de carga, que podréis generar fácilmente con alguna aplicación web como AJAXLoad.
El código será el siguiente:
<div id="div_carga"> <img id="cargador" src="./images/ajax-loader.gif"/> </div>
El estilo del div
Para que el div ocupe la pantalla completa y la imagen se quede en medio, deberemos establecer las siguientes reglas CSS:
#div_carga{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/gris.png) repeat;
display:none;
z-index:1;
}
#cargador{
position:absolute;
top:50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
}El fichero gris.png que aparece, es un fichero con una imagen en PNG de color gris con transparencias.
Finalmente tenemos que introducir el código que se encargue de hacer que en cuanto se produce una petición AJAX el div se muestre y que cuando finalice, se oculte. Podríamos hacerlo para cada operación, pero es mucho más cómodo usar las funciones:
¿Cómo? Como se muestra a continuación.
$('#div_carga') .hide() .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) ;
