Edición in Situ con Ajax
Si haz usado flickr, te habrás quedado sorprendido del sistema que utiliza para editar rápidamente el título y la descripción de las fotografías. Crear este sistema es lo que vamos a aprender en este mini tutorial.
Si nunca has usado flickr, la idea básicamente consiste en:
- Mostrar el texto a editar.
- Indicar que el texto es editable cuando se pasa el puntero del mouse.
- Al hacer clic sobre el texto, se transforma en un formulario y podremos editarlo en la misma página.
- Dar la posibilidad de cancelar o guardar el texto modificado.
- Indicar que se estan guardando los cambios
- Mostrar el nuevo texto y la posibilidad de volver a editarlo
Puedes ver el ejemplo aquí: Edición in Situ con Ajax.
El código original fue publicado en 24 Ways hace unas semanas por lo que para mayor información los remito a su artículo en Ingles. Pero este tutorial es distinto, sobre la base de ese código vamos a actualizar nuestra Base de Datos de manera práctica y para ello me voy a basar en una clase PHP publicada en PHPClasses.
Este tutorial explica como utilizar la clase PHP: Ajax Edit In Place. Por ello lo vamos a hacer los más simple posible para que luego lo puedan modificar y adaptar a sus proyectos.
Una breve explicación de la Clase
La clase cuenta con 6 ficheros:
- Example.php: Es la página que se muestra al usuario y va a ejecutar los scripts internamente.
- Edit.php: Ejecuta la actualización a la Base de Datos ó la modificación a un fichero de texto.
- Editinplace.js: Fichero donde definimos variables y ficheros en el servidor.
- Prototype.js: No debe modificarse, pero debe ser requerido por el fichero expample.php
- AjaxEditInPlace.inc.php: No debe modificarse. Ejecuta código Dhtml.
- Editinplace.css: Define los estilos propios del diseño.
La clase viene con un fichero de ejemplo, que consiste en la modificación de archivos de texto plano. Por lo que nosotros vamos a trabajar con una Base de Datos. Al final podrás descargar el código fuente.
1er paso: Creamos la Base de Datos (MySQL)
Abrimos PHPMyAdmin y ejecutamos las siguientes consultas:
# Creamos la base de datos formulario_ajax
CREATE DATABASE `formulario_ajax` ;
# Creamos la tabla `formulario`
CREATE TABLE `formulario` (
`texto` text
) TYPE=MyISAM;
# Insertamos un valor de prueba.
INSERT INTO `formulario` VALUES ('Haz click para poder editar este texto. El sistema funciona correctamente.');
2do paso: Mostramos el texto (PHP)
Abrimos el fichero Example.php y realizamos una consulta a la BD:
// Nos conectamos a la BD
$ajax_form = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);
// Seleccionamos la BD
mysql_select_db($database_ajax_form, $ajax_form);
// Realizamos la consulta, seleccionamos el texto a mostrar
$comentario = mysql_query("SELECT * FROM formulario", $ajax_form) or die(mysql_error());
$row_comentario = mysql_fetch_assoc($comentario);
Example.php debe incluir a los archivos prototype.js y editinplace.js dentro de las etiquetas <head></head>, de esta manera:
<script src="prototype.js" type="text/javascript"></script>
<script src="editinplace.js" type="text/javascript"></script>
Finalmente, mostramos el texto de la consulta:
<?php
// El resultado de la consulta lo asignamos a la variable $codeToBeEdited
$codeToBeEdited = $row_comentario['texto'];
//Indicamos el nombre de la variable
$idName1 = 'texto';
// Mostramos la consulta indicando que es un texto editable
require_once('AjaxEditInPlace.inc.php');
$ajaxEditInPlace = new AjaxEditInPlace($codeToBeEdited, 'showText');
echo $ajaxEditInPlace->getEditInPlaceCode($idName1);
?>
3er paso: Conectando las Variables
Ahora es el turno de modificar el fichero Editinplace.js. Sus dos primeras líneas
var url = 'edit.php'; // Indica el fichero que guardará el texto modificado
var idName1 = 'texto'; // Debe ser igual que la del fichero example.php
Además, a la función makeEditable le asignamos el mismo valor que a la variable idName1.
function init(){
makeEditable('texto');
}
4to paso: Actualizamos la BD (PHP)
El proceso de actualización y mostrar el nuevo texto lo realiza el fichero edit.php.
<?php
if ($_POST['id'] ='texto' ) {
// Nos conectamos a la BD
$ajax_form = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);
//Seleccionamos la Base de Datos
mysql_select_db($database_ajax_form, $ajax_form);
//Recuperamos la variable del formulario
$content = $_POST['content'];
// actualizamos la BD
mysql_query("update formulario Set texto='$content'");
// Mostramos el texto actualizado
echo $content;
}
// De lo contrario, se muestra mensaje de error.
else {
echo "No se ha podido actualizar la BD.";
}
?>
Eso es todo. Pueden ver el ejemplo funcionando o descargar el código fuente desde el área de descarga.
Hola, muy bieno el tuto, no se si habras probado una nueva galeria llamada zenphoto (zenphoto.org), todavia esta en beta es open source y te permite editar en Ajax de la misma manera, no se si usara el mismo codigo.
- responder
Enviado por RoQ (no verificado) el Lun, 01/09/2006 - 22:53.La Clase Ajax Edit in Place recién ha sido publicada en PHPClasses.org hace unos dÃas, asà que no creo que se trate del mismo script. Pero como no he visto el código de la galerÃa no lo puedo asegurar... voy a probarla y ver algo de su código. Saludos.
- responder
Enviado por Balú (no verificado) el Lun, 01/09/2006 - 23:05.Definitivamente entonces no es el mismo, para poder probarla debes instalarla logearte y luego entrar a la galeria.
- responder
Enviado por RoQ (no verificado) el Mar, 01/10/2006 - 01:25.Es posible que puedas subir el codigo de fuente otra ves ? o me lo envies por mail, es ke le estaba haciendo unas modificaciones y me lo borraron todo, te lo agradeceria mucho...
- responder
Enviado por Mr.Ale (no verificado) el Mar, 05/09/2006 - 22:46.- responder
Enviado por wer (no verificado) el Sáb, 05/20/2006 - 21:12.No se si soy yo o es culpa de mi navegador pero en el ejemplo que pones http://www.baluart.net/ejemplos/art346/ no me deja editar el texto
- responder
Enviado por Xastreu (no verificado) el Jue, 05/25/2006 - 04:32.No es problema de tu navegador Xastreu. A mà tampoco me funciona el ejemplo. Esperemos que Balú pueda chequear el error.
- responder
Enviado por Seixas (no verificado) el Jue, 05/25/2006 - 06:42.Gracias Xastreu y Seixas por el aviso, recientemente (hace unos dÃas) cambie de hosting, por lo que algunos archivos de descarga, ejemplo e imágenes han dejado de funcionar.Por lo pronto, el ejemplo de este tutorial ya esta funcionando, si encuentran otros enlaces o ejemplos que no funcionen, les agradeceré lo comuniquen.Saludos
- responder
Enviado por Balu (no verificado) el Jue, 05/25/2006 - 09:50.Aun continúan sin funcionar los ejemplos. Que mal, ya estaba empezando a creer que todo iba a dejar de ser un simple tutorial y que habÃa encontrado la solución que necesitaba. Bueno, igual haré lo que dicen aqui para ver si le puedo hacer el arreglo y ponerlo a funcionar.
- responder
Enviado por Estereofonico (no verificado) el Mié, 06/07/2006 - 21:19.Hola Estereofonico, el ejemplo ya esta funcionando nuevamente. Gracias por el aviso.
- responder
Enviado por Balu (no verificado) el Jue, 06/08/2006 - 10:10.esta muy bien el tutorial, soy nuevo en esto de ajax y javascript, quisiera que me diras orientacion de como aplicar este script a mi base de datos , pero para modificar varios campos, por lo demas esta muy bien.
- responder
Enviado por Braulio (no verificado) el Mié, 06/21/2006 - 16:52.Como utilizo varios campos, please
- responder
Enviado por Mr.Ale (no verificado) el Jue, 06/22/2006 - 17:36.Pues no me aparece nada en el ejemplo, ni campos input ni nada :-/
- responder
Enviado por rIL (no verificado) el Jue, 06/22/2006 - 17:57.bueno solo decirte que es uno de los mejores tutoriales de ajax que he visto. recién empiezo pero estoy entusiasmado con esto. saludos y sigue asÃ.
- responder
Enviado por Rbd (no verificado) el Dom, 07/02/2006 - 16:19.- responder
Enviado por andrea (no verificado) el Lun, 07/03/2006 - 08:38.muy bueno el tutorial, el combinar ajax con php y mysql tiene resultados sorprendentes, ya que me me siento que ultilizara mi propio bloc de notas en la pc, cuando en realidad lo estaba probando desde firefox
- responder
Enviado por Jose Antonio (no verificado) el Vie, 07/07/2006 - 13:20.Excelente tutorial y los felicito por el gran trabajo que han realizado en beneficio de todos nosotros. Me asalta una duda, aunque todavia no he probado ajax con mysql, me pregunto si ajax funciona sobre postgres, exactamente en la versión 8.0 o posterior. Si solo se debe cambiar la forma de conexión o consulta (mysql_........ ) por ( pg_.........). Una vez más gracias a todos.
- responder
Enviado por Alfredo Bello (no verificado) el Jue, 07/13/2006 - 05:45.hola.... chevere tu tutorial.....La
- responder
Enviado por Claudio Andrade (Ecuador) (no verificado) el Vie, 12/01/2006 - 07:42.Probé el ejemplo y funciona muy bien, sin embargo est
- responder
Enviado por Oscar Alderete (no verificado) el Jue, 12/07/2006 - 09:36.Hola amigos, revisando un poco sobre la interacci
- responder
Enviado por Roberto Ferreira (no verificado) el Jue, 05/24/2007 - 15:06.Balu, primero quer
- responder
Enviado por Martin R (no verificado) el Mar, 06/05/2007 - 18:15.Deja tu comentario