什么是使用Ajax编辑表格行的正确方法？

我浏览了许多类似标题的帖子，但还没有找到答案。什么是使用Ajax编辑表格行的正确方法？

在我的应用程序中，我想允许从索引视图编辑活动记录。该视图为每一行使用link_to_remote。当用户按下链接时，该行应该替换为用户可以通过Ajax提交的表单。

表是通过发送一个集合显示show_item部分

<% content_tag_for(:tr, show_item) do %> 
<td><%=h show_item.name %> </td> 
<td><%= show_item.role %></td> 
<td><%= link_to_remote 'Edit', :url => edit_participation_path(show_item), :method => :get %> </td> 
<% end %>

我的控制器实现编辑为

def edit 
    @participation = Participation.find(params[:id]) 
    respond_to do |format| 
     format.js do 
     render(:update) { |page| page[@participation].replace_html(:partial => "edit_item", :object => @participation) } 
     end 
    end 
    end

Edit_item部分看起来像

<% content_tag_for(:tr, edit_item) do %> 
    <% form_remote_for edit_item do |f| %> 
    <td><%= edit_item.name %></td> 
    <td> <%= f.select(:role, options_for_select(all_roles, edit_item.role)) %> </td> 
    <td><%= submit_tag 'Update', :class => 'submit' %></td> 
    <td><%= link_to_remote 'Cancel', :url => participation_path(edit_item) %></td> 
    <% end %> 
<% end %>

远程调用就经历，但他们以意想不到的方式影响桌子。在Firefox中按下该链接会导致该行消失。另一方面，如果我使用Safari，行会更新，但不是将单元格与其他表格行对齐，而是将整个替换的行放在其他行的左侧。

任何想法？

来源

2010-10-29 LRaiz

想到的第一件事是html中的语法错误。我发现你的编辑部分有4个td标签，但只有3个部分。您可能想查看Firebug生成的源代码并进行验证。

来源

2010-10-29 22:19:14 jwarchol

你使用任何模板？当你使用link_to_remote的时候，如果你正在使用一个模板，它会在模板中加载结果。

使用萤火虫插件检查源代码，并确认结果中的代码是否正是你想要的。

来源

2010-10-29 22:20:16 Ron

我打算在结果中有4个tds，而原来只有3个。除了使两者具有相同的4 tds之外，对于有关的问题id不会产生影响。我没有使用模板。我的控制器呈现一切内联。 Firebug显示已收到响应，但有一个代码304，我猜表明我没有对数据库进行任何修改（如预期的那样）。 – LRaiz 2010-10-29 22:52:16

304表示您在客户端中拥有的页面与在previos请求中最后收到的页面完全相同。我的意思是，你检查了源代码，html，它是正确的吗？ – Ron 2010-11-04 20:56:09

什么是使用Ajax编辑表格行的正确方法？

回答

相关问题