Editor Instantaneo
Ultimamente he estado “jugando” mucho con xmlHttpRequest, sencillamente me parece irresistible poder modificar el contenido, interactuar con mis bases de datos, y sobre todo facilitarle la vida al usuario sin tener que recargar la página con cada click.
Acabo de terminar un ejercicio que voy a utilizar en un intranet que estoy desarrollando ahora mismo, y me pareció tan útil que quise compartirlo con ustedes.
Precedentes... ODIO pasar al usuario de una página con datos a otra con un formulario y de regreso cada vez que quiere editar algún dato. Así que pensé en la posibilidad de desplegar los datos y convertir esa misma página en un formulario… pero la idea era casi igual a la vieja forma de hacerlo.
De repente se me ocurrió que usando xmlHttpRequest podría ayudarme a conseguir un sueño para todo desarrollador de aplicaciones web… Usar el mismo lugar donde está un texto para editar el contenido de ESE campo.
La solución: Tienes un texto, que ha sido extraido de una base de datos, y lo muestras normal. Cuando el usuario quiere editarlo, da doble click sobre el texto, y como por arte de magia se convierte en un INPUT editable… al dar [Enter], el nuevo dato es enviado al servidor para que se almacene en la base de datos, y el campo se convierte de nuevo en un texto normal, con el NUEVO contenido de ese campo en la base de datos.
Ver un ejemplo de la aplicación funcionando (necesitas un navegador que soporte xmlHttpRequest, digamos IE5.5+, Firefox, Mozilla, Safari…)
Como ven? Las aplicaciones web se hacen cada día más simples, no?
Saludos, y espero sus comentarios.
16 Comentarios
RSS de los comentarios de esta entrada.
Deja un comentario
Disculpa, los comentarios están cerrados.
Se ve muy interesante, le veo varias posibilidades, el unico problema seria la falta de costumbre del usuario.
Comment por Bio — Mar 4, 2005 @ 10:49 pm
Definitivamente está de lujo lo que has hecho. Le veo mucho futuro a esta idea para utilizarla en administradores de contenidos.
Comment por cvander — Mar 4, 2005 @ 11:32 pm
es como lo que hacen los flatcheros… pero mucho mejor, más rápido y sin plugins ñ_ñ
saludos
Comment por jesusbet — Mar 5, 2005 @ 12:28 am
Orale!
Pues lo revisaré en la práctica. Chance y tambien se me ocurre algun otro uso.
Comment por Fabalv — Mar 5, 2005 @ 12:51 am
Acabo de hacer una prueba en Mac y me “botó” el Safari… pero con todo, salvó el cambio. Es un precedente genialísimo, con solo un poquito más de debugging… Ya quisiera poder implementar esto en nuestra aplicación de extranets, sería de película.
Comment por beto — Mar 5, 2005 @ 1:09 am
Me recuerda mucho cuando quieres editar datos en Flickr
Comment por agk — Mar 5, 2005 @ 2:10 am
Alucinante.
Comment por stan — Mar 5, 2005 @ 4:27 am
Felizidades! pinta bien la idea.
He estado jugando un poco para hacerlo ‘no-intrusivo’, osea, que se muestre el formulario si no se tiene JS o no está disponible el HttpRequest.
Incluso estoy pensando en montar un pequeño framework basado en tu idea y el JPSpan de Harry.
Si se automatiza el proceso, sería muy sencillo adjuntar un pequeño icono de ‘lápiz’ que permitiera la edición, para que sea más intuitivo, y usar labels con la misma funcionalidad.
ciao, Iván
Comment por DrSlump — Mar 5, 2005 @ 11:49 am
De hecho en mi aplicación lo tengo “no intrusivo”, pero de la forma tradicional, si no se detecta lo necesario, se muestra un botón “Editar”
Comment por Manolo — Mar 5, 2005 @ 12:15 pm
Links destacados en estos días.
A través de bloglines sigo revisando muchos blogs y sitios interesantes. Todos los días descubro enlaces intersantes que quieres rescatar para el futuro. Confieso que intenté utilizar del.icio.us para este fin pero no me acostumbré. Luego utilicé el bl…
Trackback por Aventuras de un webmaster — Mar 5, 2005 @ 1:12 pm
Mike, de fiftyfoureleven ha agregado este script a los ejemplos de xmlHttpRqeuest
Da gusto codearse con esos otros scripts tan interesantes
Comment por Manolo — Mar 5, 2005 @ 4:13 pm
Hola
Muy buena opción la que ofreces, ciertamente cómoda, como han dichoa ya, el susuario puede no estar acostumbrado, es decir, podemos todos no estar acostumbrados, pero será cuestión dehacerlo.
Por el momento, solo choca con la extensión «auto copy» de Mozilla, pero solo a veces, así que al no haber pegas serias… muy buena la iniciativa.
¡ felicidades !
:)
Comment por PatomaS — Mar 6, 2005 @ 5:50 am
oye manolo… entonces… ¿cual es la diferencia con el remote scripting??? o son iguales???
Comment por jesusbet — Mar 10, 2005 @ 11:03 pm
El “Remote Scripting” es una técnica similar, pero recargada en llamadas mediante contenidos ocultos, usualmente en frames invisibles. Y la comunicación con el servidor era usando llamadas de URL’s completos que se cargan en dicho frame oculto, y luego mediante javascript se pasaba el contenido de una ventana a la otra.
Algo así.
El resultado? El mismo, pero mucho más complicado, pues como te digo, el pasar el contenido de un frame a otro podía convertirse en un problema.
xmlHttpRequest hace algo muy parecido, pero las llamadas a el sitio remoto son a través de un objeto de javascript, no de una página exterior. El manejo de errores se simplifica mucho y sobre todo, te liberas de depender de frames.
Luego te muestro algunos ejemplos.
De hecho yo creo que la aplicación “ideal” sería aquella que al detectar un browser sin soporte a xmlHttpRequest carga un entorno de frames (remote scripting) y si eso falla, muestra la página con una funcionalidad tradicional cliente-servidor.
Comment por Manolo — Mar 11, 2005 @ 12:57 am
Apenas leí este artículo, y me parece fascinante la idea, Manolo creo que esto también podría ayudar al sistema de enlaces con otras páginas, se me ocurre que el xmlHttpRequest puede mandar la información de a que link se dio clic, pero al mismo tiempo enviar la ventana a la url especificada en el href del ancla, que sería acorde con las reglas que utiliza Google =$ hay es dificil explicarlo en un comentario, aunque creo que ya lo tenias pensado =D
Comment por Zeta — Mar 15, 2005 @ 12:45 pm
Pues, enhorabuena por que me parece un ejemplo bastante útil!!
Comment por Mike P. — Mar 22, 2005 @ 8:57 am