Edición in Situ con Ajax

baluart9 Enero 2006 - 9:12am 24 comentarios
Enviar por Email Imprimir

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:

  1. Example.php: Es la página que se muestra al usuario y va a ejecutar los scripts internamente.
  2. Edit.php: Ejecuta la actualización a la Base de Datos ó la modificación a un fichero de texto.
  3. Editinplace.js: Fichero donde definimos variables y ficheros en el servidor.
  4. Prototype.js: No debe modificarse, pero debe ser requerido por el fichero expample.php
  5. AjaxEditInPlace.inc.php: No debe modificarse. Ejecuta código Dhtml.
  6. 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.

Comentarios

Imagen de RoQ
RoQ

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.

Imagen de Balú
Balú

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.

Imagen de Martha Mendoza

Hola quisiera saber por favor como hago para aplicar esto a una lista de registros.
Gracias

Imagen de krist
krist

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.

Imagen de baluart
baluart

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!

Imagen de RoQ
RoQ

Definitivamente entonces no es el mismo, para poder probarla debes instalarla logearte y luego entrar a la galeria.

Imagen de Mr.Ale
Mr.Ale

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...

Imagen de wer
Imagen de Xastreu
Imagen de Seixas

No es problema de tu navegador Xastreu. A mí tampoco me funciona el ejemplo. Esperemos que Balú pueda chequear el error.

Imagen de Balu

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

Imagen de Estereofonico

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.

Imagen de Balu

Hola Estereofonico, el ejemplo ya esta funcionando nuevamente. Gracias por el aviso.

Imagen de Braulio

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.

Imagen de Mr.Ale
Mr.Ale

Como utilizo varios campos, please

Imagen de rIL

Pues no me aparece nada en el ejemplo, ni campos input ni nada :-/

Imagen de Rbd
Rbd

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í.

Imagen de andrea
Imagen de Jose Antonio
Jose Antonio

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

Imagen de Alfredo Bello
Alfredo Bello

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.

Imagen de Claudio Andrade (Ecuador)
Claudio Andrade...

hola.... chevere tu tutorial.....La

Imagen de Oscar Alderete
Oscar Alderete

Probé el ejemplo y funciona muy bien, sin embargo est

Imagen de Roberto Ferreira
Roberto Ferreira

Hola amigos, revisando un poco sobre la interacci

Imagen de Martin R
Martin R

Balu, primero quer

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más