Editando apunte: Formularios y Ajax

Editando apunte: Formularios y Ajax cerrar apuntes

ID: 92 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: enlaces, javascript, links, php, sociedad, webmaster
Extras: enlaces, javascript, links, php, sociedad, webmaster
apunte: - - - - - - - -

<p>
	[rss]Después de integrar un sistema para editar y borrar mensajes en nuestro libro de visitas nos encontramos en la necesidad de evitar cambiar de página por cada nueva modificación.[/rss]
</p>
<p>
	Inicialmente teníamos una advertencia antes de enviar las modificaciones, pero no hacíamos nada más que cancelar el envío según la respuesta:
</p>
<pre class="codigo">function modificar(que)	{
	acto = (acto_form == 0) ? "borrar":"modificar";
	sitio = que.id.substr(2);
	return confirm("seguro que quiere " + acto + " el mensaje " + sitio);
}
var acto_form;</pre>
<p>
	[rss]Fieles a nuestras recomendaciones, debemos poder navegar perfectamente sin javascript (descativándolo), y así sucede, porque para lo único que lo usábamos era para mostrar una advertencia. Es el momento de añadirle a nuestro sistema inicial las modificaciones necesarias para nuestro objetivo...[/rss] ¡que tal si españolizamos nuestra alerta!:
</p>

<div class="codigo">
	return confirm<span id="ar" style="color: red">ar</span>(que);
</div>
<p>
	Nos queda el tratamiento con Ajax...
</p>
<h3 class="subtitulo">
	Confirmación y ejecución
</h3>
<p>
	La misma confirmación ahora debemos condicionarla, y en todo caso cancelar el evento de envío (submit). Ahora las pocas líneas de nuestro sistema de confirmación con la modificación mencionada las moveremos a la nueva función:
</p>
<pre class="codigo">function confirmar(que)	{
	acto = (acto_form == 0) ? "borrar":"modificar";
	sitio = que.id.substr(2);
	if (confirm("seguro que quiere " + acto + " el mensaje " + sitio))	{
		params = ["acto=" + acto];
		params.push("sitio=" + sitio);
		if (acto == "modificar")	{
			activo = (que.activo.checked) ? "on":"off";
			params.push("activo=" + activo);
			params.push("nombre=" + escape(que.nombre.value));
			params.push("desde=" + escape(que.desde.value));
			params.push("Email=" + escape(que.Email.value));
			params.push("URL=" + escape(que.URL.value));
			params.push("comentario=" + escape(que.comentario.value));
		}
		Ajax = objetoAjax();
		url = que.action;
		Ajax.open("post", url, true);
		Ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		Ajax.onreadystatechange = function()	{
			if	(Ajax.readyState == 4 && Ajax.status == 200) {
				// Aquí procesamos la respuesta Ajax
			}
		}
		Ajax.send(params.join("&"));
	}
	return false;
}</pre>

<p>
	Antes de explicar la "respuesta Ajax" podemos ver que pasamos siempre el sitio (equivale al id[entificador]) y el botón que se ha pulsado; y si se tratase del botón "modificar" pasamos el resto de los datos (innecesarios en el caso de pulsar el botón "borrar").
</p>
<p>
	[rss]De la respuesta solo nos interesa que se han recibido los datos, así que simplemente obtenemos el código de color, y según ese valor actualizamos el mensaje. Con el rojo eliminamos el mensaje (en nuestro caso cambiamos su color), y en el servidor generamos una transacción "delete" en la base de datos.
El código negro significa que lo hemos desactivado, y mostramos el mensaje con opacidad; y ya sea negro o azul, modificamos el mensaje con los cambios realizados.[/rss]
</p>
<p>
	Aunque aquí no mostremos el código de la respuesta, siempre será posible consultarlo desde la propia <a href="visitas/comentarios.php?editar=todos&PHPSESSID=i5edkc0gl6cfaji9hras612a92">página</a>.
</p>
<h3 class="subtitulo">
	Algunas conclusiones
</h3>
<p>
	Podríamos echar en falta un sistema para procesar varios mensajes a la vez, por ejemplo cuando simplemente queremos borrarlos o desactivarlos, pero para esos casos con el sistema actual solamente debemos hacer unas pocas pulsaciones, así que por el momento es innecesario.
</p>
<p>
	[rss]Es de destacar que el fichero que procesa cada formulario en el servidor es el mismo que tenemos para ese cometido sin usar Ajax.[/rss]
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación