什麼是使用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編輯表格行的正確方法？

回答

相關問題