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

SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
yawaramin
In the Dialyzer docs ( http://erlang.org/doc/man/dialyzer.html#requesting-or-suppressing-warnings-in-source-files ), there is a way to tu...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
makeitrein
Hey all, just started picking up Elixir last week and am writing a scraper as a learning project. Baby step #1 is extracting the number ...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
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
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New

Other popular topics Top

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
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
New
William
I would like to know that is there any online source for learning Phoenix Framework for building E-Commerce Store? Any advantage on build...
New
sergio
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
Jim
As a follow up to my earlier question: I have the code compiling and running but not getting a successful login from the rest server. ...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

We're in Beta

About us Mission Statement