getting id of parent element in rails rjs

Question

I'm working with a that allows the user to add new contents to a shipment box. For example:

The user is setting up a shipment, each shipment can include multiple boxes, and each box can contain multiple contents.

So I have link_to_remote connected like:

In my shipment box partial:

<div class="shipping_box" id="shipping_box">
    #some code
    <%= link_to_remote "Add box conents", :url => {:action=> 'add_box_contents'} %>
</div>

In add_box_contents.rjs:

page.insert_html :bottom, "shipping_box", :partial => 'box_content', :object => BoxContent.new

and in _box_content.erb

<div class="box_contents" id="box_contents">
   box contents partial rendered
</div>

For my first shipping box everything works fine, but when a second shipping box is added dynamically, the _box_content.erb partial is always rendered in the <div> for the first box. Of course this is becuase the id was specified as shipping_box, and all boxes share this id. My question then, is how do I have the new box contents partial rendered in the div for the correct containing box, not just aways the first box?

This screen shot shows the first box with 2 dynamically added contents lines (the drop downs). I would like the "add order line item" line for the second box to add a drop down list to the contents of my second box.

Answer 1

Your rjs should probably be using replace_html() instead of insert_html()

page.replace_html "shipping_box", :partial => 'box_content', :object => BoxContent.new

Answer 2

You actually want to render a partial "select_order_line", so that only the corresponding part is added to the shipping box. So just factor it out, then you can write:

page.insert_html :bottom, "box_content", :partial => 'select_order_line'