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]
Hola q tal ? He bajado el ejempro y me anda perfecto.
Mi pregunta es … ¿ como hago si quiero pasar mas parametros además del mensaje por $_POST ?
Para q sea recibido por actulizar texo.
Gracias
De esta manera:
new Ajax.InPlaceEditor($(‘editme’), ‘actualizar_texto.php’,{ callback: function(form, value) { return ‘param1=Windows¶m2=Linux&mensaje=’ + escape(value) }});
En este caso enviamos dos parametros mas param1 y param2 con sus respectivos valores, podemos recoger estos variables de la misma forma que la variable (o parametro) ‘mensaje’.
Perfecto !! Muchas Gracias !!
Salu2
Creo que hay mas formas de trabajar con script.aculo.us y espero que se mencionen en este blog mas adelante. de antemano gracias =)
Buenas tardes, llevo una semana buscando la forma de utilizar el Edit in Place (ya sea de scriptaculous o otros frameworks) del siguiente modo. Utilizo XHConn.js para hacer includes dinamicos. En la pagina principal tengo definidos campos en los que consigo en efecto Edit in Place de forma sarisfactoria. Pero en el código que integro mediante AJAX de forma dinámica, no consigo ese efecto. He visto que hay gente que utiliza IFRAMES, peró es un poco “chapuza”. Alguien me puede pasar algun ejemplo, o al menos decirme que falla en mi procedimiento, o si al final, no és posible hacerlo de este modo. Gracias!
¿Que pasa cuando el campo a editar esta vacío?
Tienes que crear un script para validar cuando se quiere ingresar un valor vacio.
Me gustaria saber como le puedo hacer para validar con javascript el valor escrito en el campo, ya que quiero validar que no se introducan mas de 100 caracteres.
porque he usado esto para validar:
callback: function(form, value) { if(value.length > 99) alert(‘Ha excedido el máximo de carácteres (100) en este campo.’); else return ‘value=’ + escape(value);}
pero como aborto la operacion ajax y reestablesco el el div a su estado original?
Hola lo que te queria decir esque por culpa de este script yo te hubiera podido dañar la web ya que no tienes restriccion alguna para los caracteres que se colocan en el editor debes hacer algo asi htmlspecialchars($string) para que los caracteres HTML no se ejecuten tampoco los JS cualquier otra persona te hubiera perjudicado arregla eso y verifica todos los archivos de los ejemplos podria ser que hayan mas vulnerables 😉
Gracias Alegomos por la sugerencia. Sé que tengo que hacer eso.
arreglen el demo, creo que fue editado por un lammer decerebrado, corrijanlo porfavor