Rails 4 JavaScript / JQuery通过编辑控制器动作呈现多个部分

时间:2014-12-30 13:00:22

标签: javascript jquery ruby-on-rails ajax ruby-on-rails-4

我正在尝试使用相同的编辑控制器操作在同一索引视图上获取多个部分。

基本上我有一个ID和运输数量的列表,我希望用户输入。部分具有两个带有更新按钮的表单输入。但是,当我尝试使用以下部分时,无论哪个“编辑”链接,我点击两个部分显示,无论我为表格列设置了哪个js ID。

我在控制器中的编辑操作:

def edit
  @invoice = Invoice.find(params[:id])
   respond_to do |format|
    format.js
    format.html
    end
 end

我的索引视图的一部分:

<% @invoices.each do |invoice| %>
  <td id="packlist"><%= invoice.readpacklistid %><%= link_to 'Edit', edit_invoice_path(invoice), :remote => true %></td>
  <td id="shipqty"><%= invoice.shippedqty %><%= link_to 'Edit', edit_invoice_path(invoice), :remote => true %></td>
<% end %>

我的edit.js.erb包含:

$('#shipqty').append( "<%= escape_javascript( render(:partial => 'shippedqty', :locals => {'invoice' => @invoice}) ) %>");
$("#packlist").append( "<%= escape_javascript( render(:partial => 'packlist', :locals => {'invoice' => @invoice}) ) %>");

_shippedqty.html.erb partials包含:

<%= form_for(@invoice) do |f| %>
  <%= f.label :shippedqty %>
  <%= f.select :shippedqty, options_for_invoices(@invoice.customerorderid) %>
  <%= f.submit %>
  <%= link_to "Cancel", invoices_path %>
<% end %>

_packlist.html.erb

<%= form_for(@invoice) do |f| %>
  <%= f.label :packlistid %>
  <%= f.select :packlistid, options_for_packlistid(@invoice.customerorderid, @invoice.shippedqty), :selected => :packlistid %>
  <%= f.submit %>
<% end %>

我希望这两个部分显示在同一页面上,但在点击所需链接时一次显示一个部分。我发现它比用户点击链接一次编辑这些内容对用户更有益。

这是使用Rails 4.1.8和Ruby 2.1.0p0

非常感谢任何帮助。

谢谢!

3 个答案:

答案 0 :(得分:1)

我终于找到了一种方法来做到这一点,这很容易。

Invoices.helper

def options_for_shippedqty(customerid)
  Shipperline.getshippqty(customerid)
end

#Used to get all the packlistid for a invoice record for drop down select

def options_for_packlistid(customerid, shipqty)
 Shipperline.packlist(customerid, shipqty)
end

然后在我看来

<%= form_for invoice do |f| %>
   <% @packlistFromList = options_for_packlistid(invoice.customerID,     invoice.shippedqty).first %>
 <% if @packlistFromList.nil? %>
   <td id="putcolor"><%= f.text_field :packlistid %><%= f.submit "Update  Packlist", { :class => "btn btn-primary" } %>
 <% else %>
   <td id="putcolor"><%= f.select :packlistid, options_for_packlistid(invoice.customerID, invoice.shippedqty) %><%= f.submit  "Update Packlist", { :class => "btn btn-primary"} %></td>
 <% end %>
  <% @shipQty = options_for_shippedqty(invoice.customerID).first %>
 <% if @shipQty.nil? %>
  <td id="putcolor"><%= f.text_field :shippedqty %><%= f.submit "Update Shipping QTY", { :class => "btn btn-primary" } %>
 <% else %>
  <td id="putcolor"><%= f.select :shippedqty, options_for_shippedqty(invoice.customerID) %><%= f.submit "Update Shipping QTY", { :class => "btn btn-primary"} %></td>
 <% end %>
  <td id="putcolor"><%= invoice.adder %></td>
  <td id="putcolor"><%= invoice.adderprice %></td>
  <td id="putcolor"><%= invoice.difference %></td>
  <td id="putcolor"><%= f.text_area :comments %><%= f.submit "Add Comment",  { :class => "btn btn-primary"} %></td>
  <td id="putcolor"><%= f.check_box :completed %><%= f.submit "Submit   Completion", { :class => "btn btn-primary"} %></td>
  <td class="hidden"><%= invoice.orgShippedQty %></td>
  <td class="hidden"><%= invoice.getPrecMetalAmount %></td>
  <td class="hidden"><%= invoice.orgPackList %>
  <td class="hidden"><%= invoice.invoiceNum %>
 </tr>
</tbody>
<% end %>
<% end %>

答案 1 :(得分:0)

我告诉你,从AJAX渲染Partial,我自己解释一下:

  • 当用户点击编辑时,您必须对某个操作进行ajax调用 编辑相应的。
  • 此操作应返回html代码(表单)。
  • 将此html代码附加到AJAX的成功参数中。 (使用 $ jquery.html)
  • 使用后删除表格。

或者

<% @invoices.each do |invoice| %>
  <td id="'packlist'+@invoice.id"><%= invoice.readpacklistid %><%= link_to 'Edit', edit_invoice_path(invoice), :remote => true %></td>
  <td id="'shipqty'+@invoice.id"><%= invoice.shippedqty %><%= link_to 'Edit', edit_invoice_path(invoice), :remote => true %></td>
<% end %>

$('#shipqty+@invoice.id').append( "<%= escape_javascript( render(:partial => 'shippedqty', :locals => {'invoice' => @invoice}) ) %>");
$("#packlist+@invoice.id").append( "<%= escape_javascript( render(:partial => 'packlist', :locals => {'invoice' => @invoice}) ) %>");

答案 2 :(得分:0)

edit.js.erb文件中,您正在渲染这两个文件,这就是您同时获取这两个文件的原因 即使您无法在编辑操作中弄清楚哪个链接被点击,因为您没有发送任何内容来隔离这两个链接。

每当用户点击任何这些链接然后在edit.js.erb中使用if / else基于这些参数条件时,你需要在参数中发送一些标识符,以找出需要渲染的文件。