I don’t know how to close a form that is opened in a Modal. How do I do that?
Here is a spike test example that opens a modal:
defmodule AppWeb.SandboxLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, greeting: "Hello World")}
end
def handle_event("open-modal", params, socket)do
IO.inspect "We are the world"
{:noreply, socket}
end
def handle_event("submit-modal-form", params, socket) do
IO.inspect params
{:noreply, socket}
end
def render(assigns) do
~H"""
<.modal id={"modal-id"}>
<%= assigns.greeting %>
<form phx-submit ={"submit-modal-form"}>
<input type="text" />
<input type = "submit"/>
</form>
</.modal>
<button phx-click = {show_modal("modal-id")}>CLICK to Open Modal</button>
"""
end
end
The documentation is linked below and it looks like it explains how to do this, but I don’t understand it.
Documentation isn’t clear.
https://hexdocs.pm/phoenix_live_view/bindings.html#js-commands
I tried to hodgepodge their code with mine to create a working example.
defmodule AppWeb.SandboxLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, greeting: "Hello World")}
end
def handle_event("open-modal", params, socket)do
IO.inspect "We are the world"
{:noreply, socket}
end
def handle_event("submit-modal-form", params, socket) do
IO.inspect params
{:noreply, socket}
end
def hide_modal(js \\ %JS{}, selector) do
js
|> JS.push("modal-closed")
|> JS.remove_class("show", to: selector, transition: "fade-out")
end
def render(assigns) do
~H"""
<.modal id={"modal-id"}>
<%= assigns.greeting %>
<form phx-submit ={"submit-modal-form"}>
<input type="text" />
<input type = "submit" phx-click={hide_modal("#modal")}/>
</form>
</.modal>
<button phx-click = {show_modal("modal-id")}>CLICK to Open Modal</button>
"""
end
end
I get an error that says
CompileError
lib/app_web/live/sandbox.ex:18: imported AppWeb.CoreComponents.hide_modal/1 conflicts with local function
Console output is shown below.
Compiling 1 file (.ex) == Compilation error in file lib/app_web/live/sandbox.ex == ** (CompileError) lib/app_web/live/sandbox.ex:18: imported AppWeb.CoreComponents.hide_modal/1 conflicts with local function
I don’t know what that means