我使用Rails 3.2.13,然後Nested_Form寶石創建裝運頭記錄和多次裝運明細記錄更新標籤。一切都很好,我可以添加,刪除詳細訂單項並正確保存。我想現在要做的就是增加一些UJS或阿賈克斯到材質選擇框的形式的嵌套fields_for節的一部分。選擇物料時,其旁邊的「當前餘額」標籤將更新爲每個行項目的正確庫存編號。的Rails 3.2.13 Nested_Form寶石使用UJS或Ajax的嵌套形式
這是我首次涉足UJS和Ajax,我就如何完成這個任務有點失落。迄今爲止,我的表單的相關部分如下這樣:
new.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](父記錄)瀏覽params來獲取id。我想只能在控制器動作中說@tb_product_type_id = param [:tb_product_type_id]
我不認爲在控制器和視圖中使用@currentBal的現有代碼在我添加時會起作用多個訂單項......我如何重構它以處理一個或多個訂單項?
我需要在我的getInventory.js.erb文件中正確更改「當前餘額」列的標籤,因爲我知道必須處理多個訂單項? (請記住我使用Nested_Form GEM)
上午我在正確的方向前進或有另一種方式去了解這一點,更容易/清潔?
在此先感謝!
UPDATE
我就擁有了一切,除了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 %>
});