How to close modal

Phoenix Forum Questions / Help
,
1

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

2

This thread might be helpful:

https://elixirforum.com/t/how-to-toggle-phoenix-modal-component-show-hide/54313/7?u=brads2s

3

For anyone searching for this.

This seems to work:
JS.navigate(~p"/")

Example:

	   <.modal id={"modal-id"}>

		   <%= assigns.greeting %>

			<form phx-submit ={"submit-modal-form"}>
	         <input type="text" /> 
	         <input phx-click={JS.navigate(~p"/")}  type = "submit" />
			</form>

    	</.modal>
4

I’m sorry I didn’t realize you were OP. You are saving lots of future work for others I’m sure.

5

The compile error is saying that the AppWeb.CoreComponents.hide_modal/1 conflicts with the hide_modal/1 function that you’ve defined in the AppWeb.SandboxLive module. The call to use AppWeb, :live_view at the top of the AppWeb.SandboxLive module will import all the functions from the AppWeb.CoreComponents module into your module, and since both modules implement a function with the same name and same number of arguments, this creates a compiler error.

You can either remove your hide_modal/1 function from the AppWeb.SandboxLive module, or rename the function, in order to make the code compile again. And then you should be able to hide your modal with the AppWeb.CoreComponents.hide_modal/1 function with code like this:

  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-id")}/>
      </form>
    </.modal>

    <button phx-click = {show_modal("modal-id")}>CLICK to Open Modal</button>
    """ 
  end