Enviar muchos campos de formulario, retornar variables de script o html con xajax

Siguiendo la primera entrega de programación con XAJAX vamos a explicar como enviar infinitos campos de formularios mediante XAJAX, como retornar una variable directamente a javascript o como retornar textos o páginas en HTML enteras.

Hace unos días hablamos de como programar de forma rápida y fácil en AJAX utilizando XAJAX. Para aquellos que no leyeran esa primera entrega se las recomiendo para estar al día con los conceptos que en este post pasaremos por alto.

Vamos a hablar de tres partes importantes a la hora de trabajar con XAJAX, importantes porque nos ayudan en el desarrollo rápido y nos pueden ahorrar muchas líneas de código y tiempo.

Enviar múltiples campos de un formulario con AJAX

Esta primera optimización para mi es de las más importantes.
Me ahorró un código de 200 líneas en validaciones en javascript. A cambio solo necesité poner una sola línea para poder enviar todos los campos de un formulario mediante XAJAX (eran unos 40 más o menos).

Supongamos que tenemos un formulario con 10 campos base, enviar estos 10 campos y validarlos no es demasiado complicado si utilizamos un poco de javascript y algo de php.
sin embargo supongamos que tenemos 10 campos base y la posibilidad de ampliar infinitamente el rango de campos, es decir, en una instancia puede que hayan 10 pero en otra podría haber tranquilamente mil…

El proceso de validación se ralentiza y los parámetros a tener en cuenta incrementan.
Tenemos que discriminar cuando enviar y cuando no y también comprobar que sigan un formato válido y lógico.
Si a todo esto le agregamos que estamos utilizando AJAX y tenemos que formar una cadena lógica y válida para enviar como POST o GET, el trabajo se cuadriplica.

XAJAX, pensando en estos problemas y en algunos otros se anticipa a nuestras necesidades con una función que recoge automáticamente todos los valores necesarios y los envía a la función que queramos como un array.

Este sería un ejemplo de un formulario de ese tipo:

<form id="form_gastos" name="form_gastos">
	<div id="tabla_gastos"></div>
	<div id="error_form"></div>
</form>

tabla_gastos es el div que contendrá una tabla generada dinámicamente mediante AJAX y la posibilidad de agregar más campos mediante javascript. Siendo el número de campos incierto en todo momento…
Entonces, como podríamos enviar los datos independientemente de su cantidad o su valor?

La respuesta, al menos utilizando AJAX, es xajax.getFormValues()
Como su propio nombre indica esta función de xajax se encarga de recoger todos los datos de un formulario especificado por su id de forma automática, todo lo que nos resta es enviar los datos recogidos a una función previamente declarada (como explicamos en el post de la serie anterior) que se encargará de tratar la masa de datos.

Un ejemplo válido podría ser la siguiente función:

function enviar_dades(any, comu) {
	if (confirm('Los campos sin CONCEPTO o sin GASTO no se guardarán!\n\n¿Desea continuar de todos modos?')) {
	xajax_Guardar(xajax.getFormValues('form_gastos'));
	}
}

Esta función enviará todos los datos a la función Guardar de xajax en el momento que se confirme el envío.

Enviar variables de PHP a Javascript mediante AJAX

Si el método anterior era eficaz en cuanto a optimización este, sin duda, lo es en cuanto a utilidad.

Una de los principales problemas a la hora de tratar con AJAX es encontrar la forma idónea de enviar variables desde PHP hacia Javascript

El método conocido por muchos es crear un bloque script y declarar una variable dentro.
Sin embargo, con XAJAX existe una utilidad mucho más simple y eficaz de comunicar PHP y Javascript

Siguiendo con fragmentos del código anterior, en este ejemplo, al enviar los datos del formulario nos devuelve una variable en Javascript con la cantidad de registros afectados.

function Guardar($campos) {
   //tratar y guardar en la db
    ...
   //Devolver cantidad de filas afectadas
   $respuesta->script("total_row = $x;");

}

Podemos acceder a la variable como lo haríamos con cualquier otra variable de javascript

function agregar_fila(mes_item) {
   //...
   total_row = total_row+1;
}

Retornar errores o bloques HTML con XAJAX

Uno de los problemas con los que nos podamos encontrar es la incapacidad de retornar bloques de HTML o mensajes de error de las funciones XAJAX.

El siguiente método fue pensado para retornar errores puntuales en el modelo de desarrollo aunque con el tiempo lo he seguido usando para distintos casos (como retornar bloques de HTML)

Si recordamos el código del principio teníamos un div para errores a la hora de procesar la función.
Dicha capa recibe los errores directamente desde la función xajax escrita en php.

function Guardar($formulari, $any, $comu) {
	ob_start(); //empezamos a cachear la salida de pantalla
	$respuesta = new xajaxResponse(); //creamos una respuesta de xajax
  
        $sql ="SELECT FOO FROM none";
        mysql_query($sql) or print(mysql_error().'
'); //retornamos el posible error. $tabla_gastos = ob_get_clean(); $respuesta->Assign("error_php","innerHTML",$tabla_gastos); return $respuesta;

El método es sencillo, utilizamos el caché del objeto ob para capturar todo lo que sale por pantalla y guardarlo en un bufer y también declaramos un objeto de xajax que sirve para devolver respuestas del servidor.
Cuando terminamos la ejecución de la función guardamos ese bufer en una variable (tabla_gastos) y enviamos la respuesta a la página con el método innerHTML en la capa error_php.

De esta forma podemos de forma rápida y sencilla reconocer los errores que puedan estar haciendo nuestro script inutilizable.

Conclusión

De esta forma terminamos la serie sobre xajax.
Hemos aprendiendo como enviar campos de un formulario determinado independientemente de su contenido o su longitud.
También hemos utilizado un método sencillo y eficaz para enviar variables desde php hacia javascript mediante ajax.
Y por último hemos aprendido a capturar los errores y mostrarlos en una capa concreta.

Por el momento será todo lo que hablaremos sobre xajax a menos que surja algún buen método que aún desconozca.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">