Koszal

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

Koszal

I have stitched something together after a fair amount of head scratching.

  1. 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.)

  2. 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.

  3. 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.

  4. 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.

  5. In the end I created a dummy <div id="receiver"> inside the live view and now I can JS.push events to that div. That works!

  6. The last problem was getting rid of the layout injected to the live_render-ed element. I ended up creating a new helper in MyAppWeb and 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.

Where Next?

Popular in Questions Top

Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
tduccuong
Hi, is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New

We're in Beta

About us Mission Statement