我有一个部分内部的表格行。当我尝试通过Ajax渲染部分时 - 它会在表顶部抛出一个新的表行,而不是重新渲染我想要更新的表行。是否存在我不遵循的部分和表格行的规则?
部分:
<div id="edit_the_item_<%= item.id %>">
<%= render 'edit_item_row', item: item, item_number: item_number %>
</div>
部分内部:
<tr>
<td>
<%= item.total %>
</td>
</tr>
Update.js.erb
$("#edit_the_item_<%= @item.id %>").html("<%= escape_javascript(render(:partial => 'reports/edit_item_row', :locals => {:item => @item})).html_safe %>");
以下是部分所在的整个表格:
<table cellspacing="0" width="100%">
<% @items.reverse.each do |item|%>
<tr>
<td class="item no_border_left" style="text-align:right;">
<div id="<%= item.id %>" class="total">
<%= number_to_currency(item.total) %>
</div>
<div id="total_form_<%= item.id %>"class="total_form">
<%= form_for item, :method => :put, :html => { :class => "theform" }, :remote => true do |f| %>
<%= f.hidden_field :report_id, :value => @report.id %>
<%= f.text_field :total,
:value => item.total,
:size => '6',
:style => "font-size:1em;text-align:right;",
:autocomplete => :off,
:class => 'form_send',
:id => "total_field_#{item.id}" %>
<% end %>
</div>
</td>
</tr>
<div id="edit_the_item_<%= item.id %>">
<%= render 'edit_item_row', item: item %>
</div>
<% end %>
</table>
更新
所以看起来你不能部分由表行和表格单元组成,并重新渲染部分,除了它无缝地工作,看起来标签搞砸了。
我不得不将我的部分内容放在这样的TD中:
<tr>
<td>
<div class="123<%= item.id %>">
<%= render 'edit_item_row', item: item %>
</div>
</td>
</tr>
然后在局部内部,我放了一整张桌子,就像这样:
<table align="center" border="0" cellpadding="4" cellspacing="0" width="100%">
<%= form_for item do |f|%>
<%= f.hidden_field :report_id, :value => @report.id %>
<tr class="highlite grid edit_item_<%= item.id %>">
<td>
</td>
<td <%= item.notes? ? "style=border-bottom:none;" : "" %>>
<%= f.text_field :name, :style => "font-size:1em;width:234px;margin-right:20px;", :value => item.name, :id => "first_focus_#{item.id}" %>
<%= f.select :tax_id, Tax.all.collect{ |c| [c.territory_short_form, c.id]}, {:selected => item.tax_id}, :style => 'font-size:1em;' %>
</td>
<td>
<%= collection_select(:item, :job_id, @jobs, :id, :name, {:selected => item.job_id}, :style => 'font-size:1em;')%>
</td>
<td>
<%= f.text_field :deduction, :style => 'width:44px;font-size:1em;text-align:right;' %>
</td>
<td style="width:80px;text-align:right;">
</td>
<td style="width:80px;text-align:right;">
<%= f.text_field :tax_override, :style => "font-size:1.1em;width:70px;text-align:right;" %>
</td>
<td>
<%= f.text_field :unclaimed_tax, :style => "font-size:1.1em;width:70px;text-align:right;" %>
</td>
<td style="text-align:right;">
<%= number_to_currency(item.cost) %>
</td>
<td style="text-align:center;">
<%= f.text_field :total, :style => 'width:60px;font-size:1em;text-align:right;' %>
</td>
</tr>
<tr class="highlite grid edit_item_<%= item.id %>">
<td colspan="7">
Notes:
<%= f.text_field :notes, :style => "width:600px;font-size:1em;" %>
</td>
<td colspan="3" style="border-top:none;">
<div class="delete" style="float:right;">
<%= link_to 'Delete', item_path(item), :method => 'delete', :confirm => "Are you sure?" %>
</div>
<div style="float:left;">
<%= f.submit 'Update', :style => 'font-size:1em;'%>
</div>
<div class="f_left" style="margin-left:80px;margin-top:4px;">
<%= link_to 'Cancel', '#', :data => { 'item-id' => "#{item.id}" }, :class => 'clicky', :onclick => "$('.original').show();$('.item_#{item.id}').show();$('.edit_item_#{item.id}').hide();return false;" %>
</div>
</td>
</tr>
<% end %>
</table>
现在一切正常吗?!耸肩。
答案 0 :(得分:0)
使用jQuery .replaceWith()
代替.html()
。前者也替换了元素,而后者只是替换了内容。
请参阅:http://api.jquery.com/html/#html2 vs http://api.jquery.com/replaceWith/
答案 1 :(得分:0)
抱怨没有记住这些令人烦恼的细节,但是当我事先得到这个问题时,这就是环境问题。这是在开发中发生但不在生产中(Heroku)。可能与config / envoronments / development有关。皮尔