Avoid "tab effect browser reloading" with live navigate?

Questions / Help
1

Hello, I’m starting with Phoenix and live navigation, it is possible to avoid the “reload effect” of the tab browser ? Like on Twitter for exemple, or I need to use some AJAX ?

2

You mean tab navigation? (sorry, I don’t know Twitter very well).

Take a look at live navigation in the guides as well as the docs for push_patch/2.

live_session/3 might also be of interest. If not now it will be soon enough!

1 Like
3

Thank you for your response :slight_smile: I speak about the tab of browser (Firefox in my case)

In Twitter or YouTube there is not “browser tab reloading effect” (probably because using AJAX and not HTTP request) when navigate in the app, I search this “smooth” navigation.

PS. I use live_session in the router

live_session :default do
    ...
end
4

If you are navigating within the same LiveView then you can use <.link patch={~p"/route"}>...</.link>. If you are navigating to a different LiveView that is under the same live session, then you use <.link redirect={~p"/route"}>...</.link> which will happen in the same websocket connection and the browser won’t reload.

1 Like
5

Thank you I will try that :slight_smile:

I navigate between LiveView in the same session with <. link navigate>

6

Interesting, it looks like I’m horrendously wrong and really bungled reading the changelog months ago :grimacing: Sorry about that. navigate should indeed work and not sure why you would be getting the reload. Are you sure the two LiveViews are under the same live session?

Ha, I’m even using navigate in my project. It’s that navigate replaced the old, deprecated, push_redirect which did the same thing, so I got confused :woozy_face:

1 Like
7

Oh ok ! Yes in the same live_session

  scope "/", AppWeb do
    pipe_through :browser

    get "/", PageController, :home
    get "/user", UserController, :home
  end

  scope "/user", AppWeb do
    pipe_through [:browser, :default]

    live_session :default, layout: {AppWeb.Layouts, :default} do
      live "/profile", ProfileLive   
      live "/chat", ChatLive
      live "/order", OrderLive
    end

  end

UserController, :home redirect to /user/profile

8

Ah yes, if you are going to be navigating from a controller to a LiveView then you’re going to get the reload. There is no simple way around that that I know of. I think using AJAX would even be complicated based on how LiveView works (it first makes an HTTP request then upgrades to a websocket). I think your best bet would be to make UserController a LiveView and stick it under the live_session. That’s the extent of what I know unless anyone else can chime in. Sorry I couldn’t be of more help!

2 Likes
9

Thank you it’s very helpful now I can guess where the problem come from :slight_smile: I will try your idea :wink:

1 Like
10

I tried this, for testing and the “LiveReload” still don’t work

  scope "/", AppWeb do
    pipe_through :browser
    get "/", PageController, :home
  end

  scope "/user", AppWeb do
    pipe_through [:browser, :default]

    live_session :default, layout: {AppWeb.Layouts, :default} do
      live "/", ProfileLive   
      live "/chat", ChatLive
      live "/order", OrderLive
    end

  end

The LiveReload is also broken in the live_session created with phx.gen.auth I think the problem come from some Phoenix Javascript not loaded, I will investigate :disguised_face:

11

It was indeed a Javascript problem, app.js was not loaded correctly :slight_smile:

12

As it was a javascript problem, the redirection to a LiveView from a controller is not a problem :slight_smile:

13

Like without a reload??

1 Like
14

Yes :slight_smile:

[debug] MOUNT AppWeb.ProfileLive
  Parameters: %{}
  Session: %{"_csrf_token" => "9Ax5i3Xp7kdHbDOsbeg53QTF"}
[debug] Replied in 97µs
1 Like
15

Oh dang, I didn’t realize that! The only have one controller right now that performs a GET request though don’t touch it much yet and didn’t realize navigate would work between those. I’ve been thinking of using more controllers with some embedded LiveViews for the public-facing part of my app so that is very good to know.

1 Like