0

我正在使用 Rails 3.2.13，然后使用 Nested_Form gem 创建一个货件标题记录和多个货件详细信息记录。一切正常，我可以添加、删除明细行项目并正确保存。我现在想做的是将一些 UJS 或 Ajax 添加到 Material 选择框，它是表单的嵌套 fields_for 部分的一部分。选择材料后，其旁边的“当前余额”标签将更新为每个行项目的正确库存编号。

在此处输入图像描述

这是我第一次涉足 UJS 和 Ajax，我对如何完成这项任务有点迷茫。到目前为止，我表格的相关部分如下所示：

新的.html.erb：

<div class="col-md-12 form-group">
<div class="panel panel-default">
    <table class="table table-striped table-hover" id="details" >
        <th>Material</th>
        <th>Current Balance</th>    
        <th>Net Weight</th>
        <th>Gross Weight</th>
        <th></th>       
        <%= f.fields_for :downstreamDetails, :wrapper => false do |dd| %>


        <tr class="fields">
        <td><%= dd.select :tb_product_type_id, options_from_collection_for_select( @productTypes, :id, :product_type), { :prompt => "Select Material"} , {:class =>"form-control col-sm-2", :data => { remote: true, :url => url_for(:controller => 'downstreams', :action => 'getInventoryData', :paroductType => @productType ,format: 'js') }  }   %></td>       
        <td nowrap="true"><label> <%= number_with_delimiter(@currentBal) %> lbs</label></td>

        <td><%= dd.text_field :ship_total_net_weight, :class =>"form-control col-sm-2" %></td>
        <td><%= dd.text_field :ship_total_gross_weight, :class =>"form-control col-sm-2" %></td>
        <td><%= dd.link_to_remove "Remove", :data => {:target => "#details"}, :class => "btn btn-primary btn-small btn-block" %></td>
        </tr>       

        <% end %>   
    </table>
    </div>

    <div class="row">   
    <div class="col-md-2"><%= f.link_to_add "Add Material" ,:downstreamDetails, :data => {:target => "#details"}, :class => "btn btn-primary btn-small btn-block" %></div>  
    </div>



    </div>
    <div class="row" >
    <div class="col-md-9"></div>    
    <div class="col-md-3"><%= f.submit "Submit", class: "btn btn-small btn-primary" %></div> 
    </div>
<% end %>
</div>

和我的控制器动作：

def getInventoryData

 @tb_product_type = Downstream.new(params[:downstream])
 @product_id = @tb_product_type.downstreamDetails.first.tb_product_type_id
 @product = ProductType.find(@product_id)
 @downstream_ids = Downstream.select("id").where(:to_company_id => current_user.company_id, :is_verified => true).accessible_by(current_ability)
 @currentBal = DownstreamDetail.select("sum(receive_total_net_weight) as currentBal").where(:downstream_id => @downstream_ids, :tb_product_type_id => @product )

 respond_to do |format|
    format.html { redirect_to create_url }
    format.js 
 end  

end

我有一个 getInventoryData.js.erb 但目前不知道该放什么。目前它只是给出一个警报，它有效。

我的问题是：

  • 当从选择框中选择材料时，有没有办法只提交 tb_product_type_id ？目前，我必须通过 params[:downstream] （父记录）浏览参数以获取 id。我只想在控制器操作中说 @tb_product_type_id = param[:tb_product_type_id]

  • 我不认为在控制器中使用 @currentBal 的现有代码和视图在我添加多个订单项时会起作用......我如何重构它以处理一个或多个订单项？

  • 知道我必须处理多个行项目，我需要在我的 getInventory.js.erb 文件中正确更改“当前余额”列的标签吗？（记住我使用的是 Nested_Form Gem）

  • 我是朝着正确的方向前进还是有另一种更容易/更清洁的方法来解决这个问题？

提前致谢！

更新

除了 getInventory.js.erb 文件外，我一切正常，仍在此处寻求帮助。能够在第一个订单项上更新“当前余额”标签，但我最初怀疑它不适用于多个订单项。所以我更改了控制器代码以获取所有材料的总数，如下所示：

def getInventoryData


 @downstream_ids = Downstream.select("id").where(:to_company_id => current_user.company_id, :is_verified => true).accessible_by(current_ability)
 @currentBals = DownstreamDetail.select("tb_product_type as material, sum(receive_total_net_weight) as currentBal").where(:downstream_id => @downstream_ids).group(:tb_product_type)

 respond_to do |format|
    format.html { redirect_to create_url }
    format.js 
 end  

end

使用此控制器代码，我想我只需要能够遍历结果集并将其与所选材料匹配，然后更新直接跟随在选择标记中的标签标记。那就是我仍在苦苦挣扎的地方，如何使用 jquery 导航 DOM 并找到要更新的正确标签？我已使用此 javascript 查找所有选择框值，但似乎无法获取下一个元素并对其进行更新：

$('select > option:selected').each(function() {
    alert($(this).text() + ' ' + $(this).val());

    <% @currentBals.each do |c| %>
    if( $(this).text() == '<%= c.material %>' ) {   
    alert(document.getElementById($(this).parent()))
    $(this).parent().next("label").innerHTML = "<%=  number_with_delimiter(c.currentBal) %> lbs"
    alert("<%= c.material %>");
    }
    <% end %>    

});
4

1 回答 1

0

因此，考虑到我之前所做的更新（特别是对控制器代码的更新），我已经使用最初所述的 nested_form gem 和 ajax+UJS 解决了这个问题。拼图的最后一块是我的 getInventory.js.erb 文件中的以下代码：

$( ".fields" ).each( function(){    
    <% @currentBals.each do |c| %>
        if( $(this).find("option:selected").text() == '<%= c.material %>' ) {   
            $(this).find("label").html("<%=  number_with_delimiter(c.currentBal) %> lbs")   
        }
    <% end %>    

});

我必须遍历“字段”类下的元素（nested_form 需要），在每个行项目中找到选定的选项，将其与控制器操作中填充的 currentBals 哈希中的每个项目进行比较。当材料匹配时，我会使用正确的平衡更新与选择框直接相邻的标签标签。

希望这可以帮助像我一样刚接触 ajax/ujs 的任何人，或者尝试为nested_form gem 的内置功能添加一些额外的功能。

于 2014-04-23T06:02:50.823 回答