Liveview: navigate with phx-click

Phoenix Forum Questions / Help
1

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) }
>
1 Like
2

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 %>
1 Like
3

Thank you. Besides your solution (not tried yet) it might also be possible to do it with phx-click={bar} where def bar handles the redirect.

I will try both possibilities.

1 Like
4

The way that events work is like this: you have phx-click="name_of_event". Then, in your module, you define an event handler like this:

def handle_event("name_of_event", _, socket) do
     all the stuff you want
end

handle_event pattern matches on events, and the string for the first arg will match against the string you defined in phx-click. You don’t define a function called name_of_event. Rather, you define a handle_event clause that pattern matches on the name.

1 Like
5

@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
4 Likes
6

So, a lessons learned is, that around <tr> I cannot wrap a <a> element. At least not directly [1]. So the first solution by @caleb-bb will not work here, but surely on other elements.

The phx-click solution works as follows quite nice:

<tr 
  role="button"
  phx-click="go_to_route"
  phx-value-to={Routes.admin_foo_path(@socket, :show, foo)}
>

def handle_event("go_to_inquiry", %{"to" => to}, socket) do
  {:noreply, push_redirect(socket, to: to)}
end

This is then a server side redirect instead of a client/browser based. I do not know if this has any consequences.

Thank you all @caleb-bb @msimonborg

All other ways via Javascript or HTML/CSS can be found here:
[1] javascript - Wrapping a table row in a element (hyperlink) in HTML5 - Stack Overflow

1 Like
7

For reference:

<.button type="button" phx-click={JS.navigate(~p"/de/new_lv")}>
  <%= dgettext("forms", "Begin") %>
</.button>
1 Like
8

Also good to know what the <.link> helper can do:

https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#link/1

<.link navigate={~p"/?sort=asc"} replace={false}>
  <.button ... />
</.link>