niccolox

niccolox

How to convert LiveView modals to in-page forms?

umm, dont want to be rude here, but modals totally suck and the Phoenix LiveView generators use them as standard.

How do I convert a modal to an in-page form?

<.modal :if={@live_action in [:new, :edit]} id="chat-modal" show on_cancel={JS.patch(~p"/chats")}>
  <.live_component
    module={FolkbotWeb.ChatLive.FormComponent}
    id={@chat.id || :new}
    title={@page_title}
    action={@live_action}
    chat={@chat}
    patch={~p"/chats"}
  />
</.modal>

I am being pretty naive by trying to simply swap but its not working

<.form :if={@live_action in [:new, :edit]} id="chat-modal" show on_cancel={JS.patch(~p"/chats")}>
  <.live_component
    module={FolkbotWeb.ChatLive.FormComponent}
    id={@chat.id || :new}
    title={@page_title}
    action={@live_action}
    chat={@chat}
    patch={~p"/chats"}
  />
</.form>

sends to url

http://localhost:4000/chats/3/edit?chat[body]=awesome+chater&chat[snowflake]=&chat[image]=&chat[video]=&chat[audio]=&chat[views]=0&chat[likes]=0&chat[rechat]=0

for a balanced data driven Modal UX discussion

Marked As Solved

tomg

tomg

What if you remove the outer .modal tag and just render the live component?

Also Liked

niccolox

niccolox

fixed, thanks @tomg

easy when you know how :smiley:

  <.live_component :if={@live_action in [:new, :edit]} 
    module={FolkbotWeb.ChatLive.FormComponent}
    id={@chat.id || :new}
    title={@page_title}
    action={@live_action}
    chat={@chat}
    patch={~p"/chats"}
  />

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
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
vac
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

Other popular topics Top

Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41989 114
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52673 488
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
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
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54120 245
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement