Dobry sposób obsługi formularzy do edycji bezpośredniej za pomocą Rails i jQuery

Question

Mam listę elementów, które są wyświetlane w serii DIV. Gdy ktoś kliknie link "edytuj", chcę zastąpić element div formularzem, który pozwoli mu w łatwy sposób edytować zawartość tego elementu.

Próbuję wymyślić idealny sposób, aby sobie z tym poradzić. Mogę utworzyć ukrytą formę edycji dla każdego elementu na liście, a hak link edytuj, aby go odsłonić, tak:

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

Czy jest jakiś lepszy sposób, aby pobrać dane i wstawić HTML postaci przyłącza się do właściwe miejsce? Pamiętaj, że używam jQuery, więc nie mogę używać pomocników prototypów.

Dzięki!

Answer 1

Najkrótsza droga do odpowiedzi jest, jak to często bywa, Ryan Bates' Railscasts. Ma odcinek pod numerem using jQuery with Rails. Chociaż nie obejmuje go w sposób konkretny, rozsądne i eleganckie rozwiązanie można wytworzyć z przedstawionych przez niego podstaw.

W moim przypadku link do edycji zostanie przesłonięty, aby wysłać zapytanie ajax do serwera, który zwraca javascript, aby zbudować częściowe z kodem edycji formularza. Łatwo, kiedy już wiesz!

Answer 2

Proponuję użyć wtyczki jakiegoś rodzaju. Jest to dość standardowa funkcja, dlaczego recode coś, co ktoś już napisał? Sprawdź wtyczkę jeditable.

Po przeczytaniu komentarza, tak. Prawdopodobnie zrobiłbym to z jQuery, gdy opisujesz, czy chcesz, aby wszystko było edytowalne jednocześnie. Nie sądzę, widziałem wtyczkę, która obsługuje więcej niż jedno pole na raz.

Answer 3

myślę, że to jest to, czego szukasz: jquery do edycji w miejsce plugin

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

Niedawno używane to miejsce i to działa. Sprawdź przykłady w pierwszym linku powyżej.

Jeśli tak naprawdę nie jest to, czego szukasz, możesz załadować stronę zdalną z obciążeniem ajax jquery . Wtedy będziesz mógł dodać dowolne elementy formularza, które chcesz.

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

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