viernes, 15 de agosto de 2008

Editar texto 'in place'

Hay un efecto muy útil que tienen muchas webs para editar texto, el texto aparece como normalmente pero si hacemos click en él aparece una caja de texto para editarlo.

Ese efecto se puede conseguir de varias formas, una de ellas es mantener dos div's con el mismo texto, uno con el texto en sí y otro con una caja de texto, luego haciendo uso del evento onclick mostrar el que queramos.

En cualquier caso podemos hacerlo también con jquery y un plugin llamado jedit.

Un ejemplo de como queda.

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>

<script>
$(document).ready(function() {
$(".edit").editable("edit.php");
});
</script>

</head>

<body>
<div class="edit">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto </div>
</body>
</html>

En la web de jedit hay más ejemplos de lo que se puede hacer con este plugin.

4 comentarios:

JAkexus dijo...

Primeramente gracias por preocuparte en este tipo de programación, poca gente está interesada en hacerlo; la pregunta es:

Todo está claro con lo de jquery, pero ¿cuál sería el código de edit.php? Es decir, ¿cómo se le asigna el atributo name y el tipo de método para ser procesado por "edit.php"?

javiyu dijo...

Gracias.

Aquí: http://www.appelsiini.net/projects/jeditable está la ayuda del plugin. Si miras en esa página veras que por ejemplo para asignarle el name al elemento habría que escribir.

$(document).ready(function() {
$('.edit').editable('edit.php', {id :'el_id', name : 'el_name'});
});

Por otro lado, en el fichero php debería haber algo similar al siguiente pseudocódigo.

1) Leer el parámetro de entrada
2) Hacer algo con la entrada, por ejemplo, guardarla en BD.
3) Devolver el resultado, que puede ser, el valor recuperado de la BD.

Juan José dijo...

si no explicas el archivo .php no tiene sentido el "tutorial", un saludo

javiyu dijo...

En el archivo php como he dicho se puede hacer casi cualquier cosa, lo importante es devolver el valor del campo.

Por ejemplo, siguiendo la numeración de antes:

1) $value = $_GET['name']
2) save_on_bd($value)
3) echo $value