简体   繁体   English

使用Rails和jQuery处理内联编辑表单的好方法

[英]Good way to handle inline-edit form using Rails and jQuery

I have a list of items, being displayed in a series of DIVs. 我有一个项目列表,显示在一系列DIV中。 When someone clicks on an "edit" link, I want to replace the div with a form that will let them edit the contents of that item in a nice way. 当有人点击“编辑”链接时,我想用一个表格替换div,让他们以一种很好的方式编辑该项目的内容。

I'm trying to think of the ideal way to handle this. 我正在考虑处理这个问题的理想方法。 Do I create a hidden edit form for every item in the list, and hook the edit link to reveal it, like this: 我是否为列表中的每个项目创建隐藏的编辑表单,并挂钩编辑链接以显示它,如下所示:

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

Or is there a better way to fetch the data and insert the form's HTML into the right spot? 或者有更好的方法来获取数据并将表单的HTML插入正确的位置? Remember, I'm using jQuery, so I can't use the prototype helpers. 记住,我正在使用jQuery,所以我不能使用原型助手。

Thanks! 谢谢!

The shortest way to an answer is, as is so often the case, Ryan Bates' Railscasts . 回答的最短路径就是Ryan Bates的Railscasts He has an episode on using jQuery with Rails . 他有一个关于在Rails中使用jQuery的剧集。 While he doesn't specifically cover it, a reasonably elegant solution can be crafted from the basics he shows. 虽然他没有专门介绍它,但可以从他展示的基础知识中制作出一个相当优雅的解决方案。

In my case, the edit link would be overridden to send an ajax request to the server, which returns javascript to build a partial with the form edit code. 在我的情况下,将覆盖编辑链接以向服务器发送ajax请求,该服务器返回javascript以使用表单编辑代码构建部分。 Easy, once you know how! 一旦你知道怎么做就很容易!

I would suggest using a plugin of some kind. 我建议使用某种插件。 This is a pretty standard feature, why recode something that someone's already written? 这是一个非常标准的功能,为什么重新编写某人已经写过的东西? Check out the jeditable plugin. 看看jeditable插件。

After reading your comment, yes. 看完你的评论后,是的。 I'd probably do that with jQuery as you describe if you wanted to make everything be editable at once. 如果你想要让一切都可以立即编辑,我可能会用jQuery来做。 I don't think I've seen a plugin that handles more than one field at a time. 我不认为我曾经看过一个可以同时处理多个字段的插件。

I think this is what you are looking for: the jquery edit in place plugin 我认为这就是你要找的:jquery编辑就地插件

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

I have recently used it and it works place. 我最近使用它,它的工作地点。 Check out the examples in the first link above. 查看上面第一个链接中的示例。

If that is really not what you are looking for, you might want to load a remote page with jquery ajax load. 如果那不是你想要的,你可能想要加载一个带有jquery ajax加载的远程页面。 Then you would be able to add whatever kind of form elements you want. 然后,您将能够添加所需的任何类型的表单元素。

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM