ntamer
card disappears when pressing on the "x-mark" icon
Hi All,
Please I need help as I’m very new to phoenix framework and elixir…
I’ve implemented a card and i want when a user clicks on the “x-mark” icon the card exits.
This is my code
Mount Function:
@impl true
def mount(params, _session, socket) do
user_id = socket.assigns.current_user.id
{
:ok,
socket
|> assign( :setup_card, true)
}
end
Handle function:
def handle_event(“hide_card”, _ , socket) do
{:noreply, assign(socket, :setup_card, false)}
end
Update funtion:
@impl true
def update(assigns, socket) do
IO.inspect(assigns)
{:ok,
socket
|> assign(assigns)}
end
HTML code icon:
Live_component of the whole card:
<.home_setup_account current_user={@current_user} setup_card={@setup_card} :if={@setup_card} />
First Post!
slouchpie
<div phx-click="hide-card" class="cursor-pointer">
<.icon name="hero-x-mark" class="w-5 h-5" />
</div>
Last Post!
slouchpie
When you tried this phx-click attribute, did you see anything in your logs when you clicked it?
I am talking about the “logs” that appear in your shell/terminal when you run mix phx.server.
Maybe there is some log about the "hide-card" event?
Last question: are you using a LiveComponent (Phoenix.LiveComponent — Phoenix LiveView v1.2.5) or is it just a normal LiveView? If you are using a live component then you need to also use the target attribute, like this:
<div phx-click="hide-card" target={@myself} class="cursor-pointer">
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









