Koszal
Parametrizing my first modal dialog
Here is a simple component to show a modal dialog:
def modal_access(assigns) do
~H"""
<.modal id="modal-access" class="phx-modal"}>
<p>Request access to this tool?</p>
</.modal>
"""
end
The modal is displayed after clicking a button.
<button
phx-click={show_modal("modal-access")}
phx-data-tool-tag={@tool_tag}
>
There are many tool buttons on the page and the user can click any of them.
This all works fine.
Now, inside the modal I would like to change
<p>Request access to this tool?</p>
to
<p>Request access to {@tool_name}?</p>
and this is where I get lost.
I did not think it was good idea to create multiple modals - one for each tool. (If I did that I could inject a different tool_name in the same loop that creates buttons.)
I was hoping I could let the server know which tool/button was clicked, then translate tool_tag to tool_name on the server side, and put it in the assigns (and then display (or update(?) the modal window).
How should I do it?
I have tried a few things, for example adding JS.push:
phx-click={JS.push("did-select-modal") |> show_modal("modal-access")}
However, I don’t see any data reaching the server. (Plus I am not really sure how that should work - would I have to embed a live-view in the modal window?)
I am probably misunderstanding/missing some core concepts. Any guidance would be much appreciated!
K.
First Post!
Koszal
I have stitched something together after a fair amount of head scratching.
-
First, there is
live_render, which allows instantiating a live view inside a functional component.<%= live_render(@conn, MyApp.ToolAccessModalDialogLive %>(Not really sure why the syntax is
<%= ... %>rather than a usual component instantiation.) -
Now that I have a live view to send events to, I can use
JS.push(...)However, I need to specify the target:JS.push(... target: ...)because the button that triggers showing of the modal dialog is outside that dialog. -
Using
target: "modal-access"(see the snippet in my original question) does not work because"modal-access"is the id of the modal dialog, the actual live-view is nested inside. -
I specified the id in
<%= live_render(@conn, .., id: ...)but that does not work either because the id gets overwritten with the auto-generated one. -
In the end I created a dummy
<div id="receiver">inside the live view and now I canJS.pushevents to that div. That works! -
The last problem was getting rid of the layout injected to the live_render-ed element. I ended up creating a new helper in
MyAppWeband then in my module I replaced
use MyAppWeb, :live_view
with
use MyAppWeb, :live_render
where live_render is like live_view but without the layout:
def live_render do
quote do
use Phoenix.LiveView,
layout: false
unquote(html_helpers())
end
end
K.
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
- #code-sync
- #javascript
- #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








