En un artículo anterior comentamos el uso de script.aculo.us para efectos. Esta vez abordaremos el uso de los controles. Especificamente el In Place Editor Control, un control que permite la edición de su contenido y guardarse instantáneamente si lo deseamos. Para tener una idea de esto, seguramente tenemos cuenta en flickr y quizás nos hayamos dado cuenta de que podemos editar los títulos de las fotografías haciendo click sobre estos y dándonos la opción de Guardar o Cancelar la edición.
Vamos a trabajar el guardado del texto con PHP y MySQL (aunque la idea también es útil para otros lenguajes de servidor como ASP).
[Ver Ejemplo] [Descargar]
Antes que nada descargar los archivos de script.aculo.us y vamos a necesitar 4 archivos de este paquete: prototype.js, scriptaculous.js, effects.js y controls.js.
Empezemos creando nuestra tabla, tendrá está estructura:
tabla texto
CREATE TABLE texto (
mensaje text
)TYPE=MyISAM;
INSERT INTO texto VALUES ('Click para editar');
Ahora creamos un archivo que contendrá los datos de conexión a la Base de Datos.
conexion.php
<?php //Configuracion de la conexion a base de datos $bd_host = "localhost"; $bd_usuario = "root"; $bd_password = ""; $bd_base = "ribosomatic"; $con = mysql_connect($bd_host, $bd_usuario, $bd_password); mysql_select_db($bd_base, $con); ?>
Este archivo muestra el contenido actual de la tabla texto.
texto_actual.php
<?php
require('conexion.php');
$Resultado=mysql_query("SELECT * FROM texto",$con);
$MostrarFila=mysql_fetch_array($Resultado);
$mensaje_actual=$MostrarFila['mensaje'];
echo $mensaje_actual;
?>
Ahora el archivo que guardará los cambios en la tabla texto. Este archivo recibe un valor a través del método POST y ese valor se almacena en la variable $mensaje. Luego hace un UPDATE a la tabla y llama al archivo texto_actual.php que mostrará el texto actualizado.
actualizar_texto.php
<?php
require('conexion.php');
$mensaje=$_POST['mensaje'];
$query = "UPDATE texto SET mensaje='$mensaje'";
$result = mysql_query($query,$con);
include('texto_actual.php');
?>
Finalmente en un archivo al cual llamaremos edicion.php haremos lo siguiente:
- Llamaremos a los 4 archivos de script.aculo.us
- Colocaremos una etiqueta <strong> cuya atributo id tendrá el valor de ‘editame’ (puede ser cualquier etiqueta siempre y cuando tenga el atributo ‘id’)
- Dentro de la etiqueta <strong></strong> incluiremos el archivo texto_actual.php, el cual mostrará el contenido de la tabla texto
- Colocamos etiquetas <script> para llamar al control InPlaceEditor, y especificamos 3 parámetros. El primero indica el ‘id’ de la etiqueta HTML, en nuestro caso el id de <strong> es ‘editame’; el segundo es el archivo que realiza el proceso de actualizar el contenido, en este caso actualizar_texto.php; y el tercero especificamos el nombre de la variable que será enviada para ser guardada en la tabla texto, en este caso mensaje.
Dentro de <script></script> quedaría así:
<script>
new Ajax.InPlaceEditor($('editame'), 'actualizar_texto.php',{ callback: function(form, value) { return 'mensaje=' + escape(value) }});
</script>
Entonces, el archivo edicion.php completo quedaría de la siguiente manera.
edicion.php
<html>
<head>
<title>Ejemplo del uso de Controles de script.aculo.us</title><script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/controls.js" type="text/javascript"></script>
</head>
<body>
<strong id="editame">
<?php include('texto_actual.php') ?>
</strong>
<script>
new Ajax.InPlaceEditor($('editame'), 'actualizar_texto.php',{ callback: function(form, value) { return 'mensaje=' + escape(value) }});
</script>
</body>
</html>
Existen otros controles que podemos usar con script.aculo.us que seguramente veremos mas adelante.
[Ver Ejemplo] [Descargar]