Rails部分渲染两次?

时间:2013-11-21 01:04:40

标签: jquery ruby-on-rails renderpartial

我有一个部分内部的表格行。当我尝试通过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>

现在一切正常吗?!耸肩。

2 个答案:

答案 0 :(得分:0)

使用jQuery .replaceWith()代替.html()。前者也替换了元素,而后者只是替换了内容。

请参阅:http://api.jquery.com/html/#html2 vs http://api.jquery.com/replaceWith/

答案 1 :(得分:0)

抱怨没有记住这些令人烦恼的细节,但是当我事先得到这个问题时,这就是环境问题。这是在开发中发生但不在生产中(Heroku)。可能与config / envoronments / development有关。皮尔