When using phx-submit in a form within LiveView, I want to include data from other elements connected via hooks in the params.
I thought sending an event to the specific element using JS.dispatch/2 and then having that element send a LiveView event back along with the form data would work, but I have no idea how to retrieve the form data.
Below is the example code.
** I want to handle multiple hook elements in a form.
You could do it in JS, but it would be a lot easier if you could just make your input elements in the DOM structured the way you need for them to submit right.
It’s a good idea for simple inputs.
But it’s not efficient when the value of input is too large and changed frequently (e.g. large HTML post from editor) or the input is complicated (e.g. multi select. I have no idea how to update it.).
Hi @nallwhy,
If you are using a sophisticated JS component (e.g. Quill, TipTap), probably the easiest way is to wire up an event handler for your Javascript component I the mount function of your liveview hook. That event handler can then push what’s needed to your liveview process using pushEvent or pushEventTo. You then need to write handle_event functions in your liveview (or live component) as normal.
This link explains it: How to connect Quill with Phoenix using Quill as an example. I used this as a reference for wiring up the TipTap editor library.
An example multi-select component for liveview is available via a library - GitHub - saleyn/phx-multi-select: Phoenix LiveView MultiSelect Component - you could take a look in there for more inspiration on how to wire things together.
There’s another post covering the wire-up to Trix editor:
© Copyright Elixir Forum | Terms | Privacy & Cookies
