Cách tốt để xử lý biểu mẫu chỉnh sửa nội tuyến bằng Rails và jQuery

Question

Tôi có một danh sách các mục, được hiển thị trong một loạt các DIV. Khi ai đó nhấp vào liên kết "chỉnh sửa", tôi muốn thay thế div bằng một biểu mẫu sẽ cho phép họ chỉnh sửa nội dung của mục đó theo cách tốt đẹp.

Tôi đang cố gắng nghĩ ra cách lý tưởng để xử lý việc này. Tôi có thể tạo một hình thức chỉnh sửa ẩn cho tất cả các mục trong danh sách, và móc liên kết chỉnh sửa để lộ nó, như thế này:

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

Hoặc là có một cách tốt hơn để lấy dữ liệu và chèn HTML của form vào một đúng chỗ? Hãy nhớ rằng, tôi đang sử dụng jQuery, vì vậy tôi không thể sử dụng những người trợ giúp nguyên mẫu.

Cảm ơn!

Answer 1

Con đường ngắn nhất để một câu trả lời là, như rất thường xảy ra, Ryan Bates' Railscasts. Anh ấy có một tập phim trên using jQuery with Rails. Trong khi ông không cụ thể bao gồm nó, một giải pháp hợp lý thanh lịch có thể được chế tác từ những điều cơ bản ông cho thấy.

Trong trường hợp của tôi, liên kết chỉnh sửa sẽ bị ghi đè để gửi yêu cầu ajax tới máy chủ, trả về javascript để tạo một phần với mã chỉnh sửa biểu mẫu. Dễ dàng, một khi bạn biết làm thế nào!

Answer 2

Tôi khuyên bạn nên sử dụng plugin của một số loại. Đây là một tính năng khá tiêu chuẩn, tại sao recode cái gì đó của một ai đó đã được viết? Hãy xem plugin jeditable.

Sau khi đọc nhận xét của bạn, vâng. Tôi có thể làm điều đó với jQuery khi bạn mô tả nếu bạn muốn làm cho mọi thứ có thể chỉnh sửa cùng một lúc. Tôi không nghĩ rằng tôi đã nhìn thấy một plugin xử lý nhiều hơn một lĩnh vực tại một thời điểm.

Answer 3

Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm: các jquery chỉnh sửa tại chỗ cắm

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

Gần đây tôi đã sử dụng nó và nó hoạt động diễn ra. Xem các ví dụ trong liên kết đầu tiên ở trên.

Nếu điều đó thực sự không phải là những gì bạn đang tìm kiếm, bạn có thể muốn tải một trang từ xa với tải jquery ajax. Sau đó, bạn sẽ có thể thêm bất kỳ loại phần tử biểu mẫu nào bạn muốn.

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

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