wktdev

How to Toggle Phoenix Modal Component show/hide

Phoenix 1.7 generator comes with a modal in “CoreComponents”.
The instructions do not explain how to toggle it.

The base syntax is:

  <.modal
  id="user-modal"
  show >

The show attribute is what triggers the popup.

In JavaScript ,to trigger a modal you typically have a boolean to toggle the “show” attribute value. In Elixir I have no idea how to do that nor do I know if that is the approach that is expected of the developer to make it work.

The documentation is here:

      <.modal id="confirm-modal">
        Are you sure?
        <:confirm>OK</:confirm>
        <:cancel>Cancel</:cancel>
      </.modal>

  JS commands may be passed to the `:on_cancel` and `on_confirm` attributes
  for the caller to react to each button press, for example:

      <.modal id="confirm" on_confirm={JS.push("delete")} on_cancel={JS.navigate(~p"/posts")}>
        Are you sure you?
        <:confirm>OK</:confirm>
        <:cancel>Cancel</:cancel>
      </.modal>

The example does not explicitly show the show attribute, In the working example below from the phoenix generator, it is used.


<.modal
  :if={@live_action in [:new, :edit]}
  id="user-modal"
  show
  on_cancel={JS.navigate(~p"/users")}
>

<.live_component
    module={AppxWeb.UserLive.FormComponent}
    id={@user.id || :new}
    title={@page_title}
    action={@live_action}
    user={@user}
    patch={~p"/users"}
  />
</.modal>

9 comments

/phoenix #modals

0 4429 9

2024-05-10 05:30:29 UTC

Marked As Solved

bemesa21

I saw that you solved your problem, but I was already writing an answer for you. I’ll leave it here in case this example works for someone else.

A function show_modal/2 is also defined in CoreComponents, the only thing you need to pass to this function is the id of your modal. In this function, JS commands are used to display the modal and apply some transitions to it.

So you just need to define the id of your modal:

<.modal
    :for={user <- @users}
    id={"delete-modal-#{user.id}"}
    on_confirm={
      JS.push("delete-user", value: %{id: user.id})
      |> hide_modal("delete-modal-#{user.id}")
      |> hide("#user-#{user.id}")
    }
>
  Are you sure you want to delete "<%= user.name %>"?
  <:cancel>Cancel</:cancel>
  <:confirm>Delete</:confirm>
</.modal>

and call that function:

<.link
  id={"delete-user-#{user.id}"}
  phx-click={show_modal("delete-modal-#{user.id}")}
>

Post #7

Also Liked

wktdev

For anyone asking the same question it’s two lines of code and requires JavaScript. I spent a day and a half going in circles over this nonsense. It has nothing to do with the show command. The show/hide feature pertains to the ID assignment and that it needs the JS module.




  <.modal
    id="user-modal"
    >
  </.modal>


<button phx-click={show_modal("user-modal")}>  Click me </button>

Post #6

codeanpeace

I totally understand it can be frustrating and I know it’s not likely your intention, but let’s not take it out on the project and its contributors. What might seem like “nonsense” when you’re frustrated usually begins to make a lot of sense with a little bit of curiosity, patience, and experience. For example…

… following the show attribute could have gotten you to those two lines of code much sooner. If you look at the function that defines the modal in the CoreComponents module, you’ll see the how the boolean show attribute acts as a flag for the show_modal/1 function that takes an @id as an argument and wraps the Phoenix.LiveView.JS.show/2 function among other JS commands.

# CoreComponents
  attr :show, :boolean, default: false
  ...
  def modal(assigns) do
    ~H"""
    <div
      id={@id}
      phx-mounted={@show && show_modal(@id)}
      ...
    >
      ...
    """
  end
  ...
  def show_modal(js \\ %JS{}, id) when is_binary(id) do
    js
    |> JS.show(to: "#{id}")
    |> JS.show(
      to: "#{id}-bg",
      transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
    )
    |> show("#{id}-container")
    |> JS.add_class("overflow-hidden", to: "body")
    |> JS.focus_first(to: "#{id}-content")
  end

Post #8

Last Post!

soyjeansoy

Massive thank youuuuu!!! the show_modal function was already aliased!

The reason for that is: I looked at lib/your_app_web/your_app_web.ex,

unquote(html_helpers()) ← this

defp html_helpers do
  quote do
    # HTML escaping functionality
    import Phoenix.HTML
    # Core UI components and translation
    import HangmanWeb.CoreComponents
    import HangmanWeb.Gettext

    # Shortcut for generating JS commands
    alias Phoenix.LiveView.JS

    # Routes generation with the ~p sigil
    unquote(verified_routes())
  end
end

Took me lots of hours why JS.show_modal is undefined on the page