Dynamic form generation in Phoenix

Phoenix Forum Questions / Help
, , ,
1

I am trying to create a form where the user once selects a product_id from select, he will be displayed all the options and their values from product_options.

I am unable to figure out how to make the form display dynamically based on selecting product_id which is in the form itself.

I have the following schemas :

Product :
create table(:products) do add :name, :string add :description, :string

Options :

create table(:options) do add :description, :string [eg : size,weight,color etc.,]

Product_options :

create table(:product_options) do add :values, {:array, :string}, default: [] ( contains all possible values for one product and option) add :product_id, references(:products, on_delete: :nothing) add :option_id, references(:options, on_delete: :nothing)

I want to create a inventory where options is a map of values for each option that the product has through product_options.

The schema looks like this :

create table(:product_inventory) do add :options, :map add :product_id, references(:products, on_delete: :nothing)

2

I can think of 3 options.

  1. Render all the product options on the original page and put them in a hidden div. Set either the id or data-id of that div to the product_id. Then, registered an change event on the select control and make that div visible.
  2. Bind an ajax request to the selects change event. Render the products components and modify the DOM on success of the ajax request
  3. Use phoenix channels. On the change event, push the a request with the product id to the server. On the server, Render the html for that product and push back to the client. in the .receive("ok" => resp { ... } JS handler update the DOM with the returned HTML.
1 Like
3

You can also easily use something like unpoly.js to refresh only the part of the page containing the information once the user selects something, pretty trivial to implement then.

1 Like
4

I thought of first two but third one seems a more safe and efficient way.

Thank you :slight_smile:

6

I didn’t know that. awesome, this looks promising. I will look into it.

thank you! :smiley: