Rails 4 JavaScript / JQuery render multiple partial through edit controller action

Question

I am trying to get multiple partials on the same index view with the same edit controller action.

Basically i have a list of both ID's and of shipping quantity's i would like the user to enter. The partials have both of the form inputs with an update button. However, when i try do use the partials as follows no matter which "Edit" link i click both partials show up regardless of which js ID i have set for the table column.

My edit action in controller:

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

Part of my index view:

<% @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 %>

My edit.js.erb contains:

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

_shippedqty.html.erb partials contains:

<%= 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 %>

I would like both of these partials to show up on the same page but show up one at a time when clicked on their desired link. I just find it much more beneficial to the user than having to click a link to edit these all at once.

This is using Rails 4.1.8 and Ruby 2.1.0p0

Any help is greatly appreciated.

Thanks!

Answer 1

I finally figured out a way to do this which makes it easy.

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

Then in my view

<%= 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 %>

Answer 2

I porpouse you, render Partial from AJAX, I explain myself:

• When a user click on edit, you have to make a ajax call to an action edit that correspond.
• This actions should return a html code (the form).
• Append this html code where you want in success param of AJAX. (use $jquery.html)
• Delete de form after use it.

Or

<% @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 %>

and

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

Answer 3

In your edit.js.erb file you are rendering both file that is why your getting both from at the same time.
Even you are not able to figure out in your edit action which link was clicked as you are not sending anything to segregate both links.

you need to send some identifier in params whenever a user click on any of these links and then in edit.js.erb use if/else based on these params condition, to figure out which file needs to render.