rrevanth
Dynamic form generation in Phoenix
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)
Most Liked
smpallen99
I can think of 3 options.
- 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
changeevent on theselectcontrol and make that div visible. - Bind an ajax request to the
selectschangeevent. Render the products components and modify the DOM on success of the ajax request - 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.
OvermindDL1
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.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








