Buena forma de manejar el formulario de edición en línea utilizando Rails y jQuery

Question

Tengo una lista de elementos que se muestran en una serie de DIV. Cuando alguien hace clic en un enlace de "editar", quiero reemplazar el div con un formulario que le permita editar el contenido de ese elemento de una manera agradable.

Estoy tratando de pensar en la forma ideal de manejar esto. Cómo puedo crear un formulario de edición oculto para cada elemento de la lista, y el gancho en el enlace Editar para revelar que, de esta manera:

<div> 
    <a href="#">edit</a> Item One 
    <div id="edit_1202" class="editform">Edit form goes here</div> 
</div> 
<div> 
    <a href="#">edit</a> Item Two 
    <div id="edit_2318" class="editform">Edit form goes here</div> 
</div> 

o hay una mejor manera de recuperar los datos e insertar el código HTML de la forma en el lugar correcto? Recuerda, estoy usando jQuery, así que no puedo usar los prototipos de ayuda.

Gracias!

Answer 1

El camino más corto para una respuesta es, como suele ser el caso, Ryan Bates Railscasts. Él tiene un episodio en using jQuery with Rails. Si bien no lo cubre específicamente, se puede diseñar una solución razonablemente elegante a partir de los conceptos básicos que muestra.

En mi caso, el enlace de edición se invalidará para enviar una solicitud ajax al servidor, que devuelve javascript para compilar un código parcial con el código de edición del formulario. ¡Fácil, una vez que sabes cómo!

Answer 2

Sugeriría usar un plugin de algún tipo. Esta es una característica bastante estándar, ¿por qué recodificar algo que alguien ya ha escrito? Mira el plugin jeditable.

Después de leer su comentario, sí. Probablemente haga eso con jQuery mientras describes si quieres que todo sea editable a la vez. No creo haber visto un complemento que maneje más de un campo a la vez.

Answer 3

creo que esto es lo que busca: la edición jQuery plug-in en su lugar

http://davehauenstein.com/code/jquery-edit-in-place/example/ http://code.google.com/p/jquery-in-place-editor/

he utilizado recientemente y funciona lugar. Mira los ejemplos en el primer enlace de arriba.

Si eso no es realmente lo que está buscando, es posible que desee cargar una página remota con jquery ajax load. Luego, podría agregar cualquier tipo de elementos de formulario que desee.

http://docs.jquery.com/Ajax/load

$('.yourlinkid').click(function(){ 
    var id = $(this).attr('id'); 
    $("div#editThisDiv").load("/events/editAjax/" + id); 
});