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>
Feature flags, or feature toggles, are boolean values associated to a name . They should be used to control whether some application feature is enabled or disabled, and they are meant to be modified at runtime while an application is running. This is usually done by the people who control the application.
Usually it just means a Boolean variable. That’s how I use it. So wax on, wax off kind of deal
# In your LiveView module
defmodule MyApp.MyLiveView do
use Phoenix.LiveView
# Initialize show_modal to false
def mount(_params, _session, socket) do
{:ok, assign(socket, show_modal: false)}
end
# Handle the phx-update event to toggle show_modal
def handle_event("toggle_modal", _params, socket) do
{:noreply, assign(socket, show_modal: !socket.assigns.show_modal)}
end
end
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>
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>
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
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