2014-04-17 79 views
0

我使用Rails 3.2.13,然後Nested_Form寶石創建裝運頭記錄和多次裝運明細記錄更新標籤。一切都很好,我可以添加,刪除詳細訂單項並正確保存。我想現在要做的就是增加一些UJS或阿賈克斯到材質選擇框的形式的嵌套fields_for節的一部分。選擇物料時,其旁邊的「當前餘額」標籤將更新爲每個行項目的正確庫存編號。的Rails 3.2.13 Nested_Form寶石使用UJS或Ajax的嵌套形式

enter image description here

這是我首次涉足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 %>  

}); 

回答

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的內容添加一些額外的功能。