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.
Si te gustó este artículo también te gustará...
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.
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.
Hola quisiera saber por favor como hago para aplicar esto a una lista de registros.
Gracias
Hola Balu, la verdad está bien explicado el post, pero al igual que el articulo en inglés hay un pekeño inconveniente, como hago para que al enviar los datos (en especial el id de la tabla ke deseo modificar) y actualizar la DB. a manera de exégesis:
UPDATE tabla SET campo1 = valor1 WERE id_usuario = '$usuario';
como rayos actualizaria por ejemplo el perfil de un usuario si no se puede enviar este dato (el id del usuario)?.
Mil gracias por su respuesta.
Gracias por comentar Krist,
te explico rápidamente como enviar otra variable con ajax (puede ser el id del usuario), para que veas como funciona. Luego, adaptala según tus necesidades:
En el paso 2:
Agrega un div con el id del usuario. En este caso le pongo 20 (debe ser el valor dinámico):
<div id="userID" style="display:none">20</div>En el paso 3:
Declara otra variable:
var userID = '';En la función ini, le pasas el valor del elemento userID:
userID = $("userID");En el paso 4:
Recuperas userID
$usuario = $_POST['userID'];Y realizas tu consulta
UPDATE tabla SET campo1 = valor1 WERE id_usuario = '$usuario';Ahora, para que todo funcione debes cambiar la función saveChanges() de editinplace.js, añadiendo el parámetro userID a la variable pars. Podría quedar como:
var pars = 'id='+obj.id+'&userID='+userID.innerHTML+'&content='+new_content;Esto último es lo importante. Así puedes enviar las variables que desees por ajax.
Saludos!
Definitivamente entonces no es el mismo, para poder probarla debes instalarla logearte y luego entrar a la galeria.
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...
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
No es problema de tu navegador Xastreu. A mí tampoco me funciona el ejemplo. Esperemos que Balú pueda chequear el error.
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
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.
Hola Estereofonico, el ejemplo ya esta funcionando nuevamente. Gracias por el aviso.
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.
Como utilizo varios campos, please
Pues no me aparece nada en el ejemplo, ni campos input ni nada :-/
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í.
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
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.
hola.... chevere tu tutorial.....La
Probé el ejemplo y funciona muy bien, sin embargo est
Hola amigos, revisando un poco sobre la interacci
Balu, primero quer