christo-ph
Liveview: navigate with phx-click
How can I create or simulate a link to navigate to another page/liveview? I do not want to create a whole <a> element, but create a click event on a tr - like I would do with JS and onClick=window.location....
My first attempt is this, but obviously doesn’t seem to be the right one:
<tr
role="button"
phx-click={live_redirect "foo", to: Routes.admin_foo_path(@socket, :show, foo) }
>
Most Liked
msimonborg
@christo-ph To tie it all together, something like this should get you there:
def render(assigns) do
~H"""
<button phx-click="redirect">Redirect</button>
"""
end
def handle_event("redirect", _, socket) do
{:noreply, push_redirect(socket, to: "/path")}
end
serpent
For reference:
<.button type="button" phx-click={JS.navigate(~p"/de/new_lv")}>
<%= dgettext("forms", "Begin") %>
</.button>
caleb-bb
I dunno about the <tr> part, but live_redirect/2 might be what you’re looking for if you’re trying to create a link to another liveview.
EDIT: excuse me, I didn’t read your code carefully. live_redirect/2 returns a link, so it’s not something you would emit as a click event. phx-click="xyz" emits an event to the parent liveview (or to the current liveview if target=@myself is specified) which receives it using an event handler. So you wouldn’t put the live_redirect inside of the phx-click.
If it wasn’t clear: live_redirect/2 does not actually perform a redirect. Rather, it creates a link that can create a redirect when clicked.
I’m not sure how to make a <tr> do the same thing. My gut feeling is to use
<%= live_redirect to: Routes.live_path(@socket, MyLive, dir: :asc), replace: false do %>
<tr> table stuff</tr>
<% end %>
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
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









