rails link_to tag to build join record in rails

Question

I'm trying to build a form that allows a user to add products to an order.

The way I have it setup so far is that a user will select from 2 dropdown boxes and type into 1 text field 1 - the product they want 2 - its size 3 - the quantity they want.

What I hope to do is have the user click a link_to tag to "Add" this item to their order.

I was thinking I could do this via ajax and build the associative record in my controller and have it render on the page when the request returns.

When the user is done with their order and hits submit I can create my Customer Order with the products they wish to buy.

Am I approaching this correctly?

e.g. my form has the following:

<%= collection_select :order_line_item, :cake_id, Cake.order(:name), :id, :<%= grouped_collection_select :order_line_item, :cake_size_id, Cake.all, :cake_sizes, :name, :id, :name %>
<%= label_tag :quantity %>
<%= text_field_tag :quantity %>
<%= link_to "Add to order", add_to_order_path, {method: :post, remote: true} %>

Am I approaching this correctly? I then need to be able to add the fields above to the ajax post so I can populate the associative record with the relevant values.

Answer 1

Am I approaching this correctly?

I don't know about 'correctly'. But, I can imagine some alternatives.

Here are some sketches:

One Option:

This approach assumes that the Order is already saved so that you can associate a Product with that order. Perhaps Order has a status.

• You could wrap that whole bit (product, size, quantity) in its own form (not embedded within your order form).
• Have the form submit via js using remote: true (if you're using Rails 5, then this may be the default behavior).
• When the user clicks on "Add", you will receive the field values as parameters in your controller where you can associate the Product with the Order.
• Then, render back an HTML blob that can be inserted into the DOM (perhaps an order row?)
• Use js to insert the blob and clear the form.

Another Option:

• You could leave that whole bit (product, size, quantity) as not a form and have it reside outside your form.
• Wrap it all up in a div.
• Convert that link into a span or something similar.
• Attach an .on 'click' event (I'm assuming jquery, you don't specify, so I'm going to run with it) to the wrapper.
• When the link is clicked, the click event will bubble up to the wrapper.
• Have the wrapper submit the field values via ajax.
• Proceed as above.

I wouldn't really recommend this approach as it seems to me that you're basically replicating the functionality of a remote form. But, there is...

Yet Another Option

This approach does not require that the Order already exists.

• You could have a hidden order item row outside of your form.
• You construct your page as above in Another Option.
• Now, when the user clicks the "Add" button, clone the hidden order item row.
• Fill in the cloned order item with the appropriate values.
• Insert the cloned order item into your Order form.
• When the user clicks "Order" or "Submit" or whatever they click when they're done, you'll get all of the order rows as field sets.
• Process the order line items along with the form. (Some folks might suggest accepts_nested_attributes_for, but I never use that.)

I suspect there are others. Or perhaps variations.