Bonne façon de gérer le formulaire d'édition en ligne en utilisant Rails et jQuery

Question

J'ai une liste d'éléments, affichés dans une série de DIVs. Quand quelqu'un clique sur un lien «éditer», je veux remplacer le div par un formulaire qui va leur permettre d'éditer le contenu de cet élément d'une manière agréable. J'essaye de penser à la manière idéale de manipuler ceci. Est-ce que je crée une forme d'édition cachée pour chaque élément de la liste, et le crochet le lien d'édition pour le révéler, comme ceci:

<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> 

Ou est-il une meilleure façon de récupérer les données et insérez le code HTML du formulaire dans la bon endroit? Rappelez-vous, j'utilise jQuery, donc je ne peux pas utiliser les aides prototypes.

Merci!

Answer 1

Le plus court chemin vers une réponse est, comme cela est souvent le cas, Ryan Bates' Railscasts. Il a un épisode sur using jQuery with Rails. Bien qu'il ne le couvre pas spécifiquement, une solution raisonnablement élégante peut être conçue à partir des bases qu'il montre. Dans mon cas, le lien d'édition serait ignoré pour envoyer une requête ajax au serveur, ce qui renvoie javascript pour construire un partiel avec le code d'édition du formulaire. Facile, une fois que vous savez comment!

Answer 2

Je suggère d'utiliser un plugin quelconque. C'est une fonctionnalité assez standard, pourquoi recoder quelque chose que quelqu'un a déjà écrit? Découvrez le plugin jeditable. Après avoir lu votre commentaire, oui. Je ferais probablement cela avec jQuery comme vous le décrivez si vous vouliez que tout soit éditable à la fois. Je ne pense pas avoir vu un plugin gérant plus d'un champ à la fois.

Answer 3

Je pense que c'est ce que vous cherchez: la modification jquery en place plug-in

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

Je l'ai utilisé récemment et il fonctionne lieu. Consultez les exemples dans le premier lien ci-dessus.

Si ce n'est vraiment pas ce que vous cherchez, vous pouvez charger une page distante avec jquery ajax load. Ensuite, vous serez en mesure d'ajouter tout type d'éléments de formulaire que vous voulez.

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

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