tms

tms

How to trigger live navigation from JS?

Hi there! I’m building a small personal web-app with LiveView, and have been experimenting with some navigation keyboard shortcuts. I’d really like to be able to have certain keyboard shortcuts trigger live redirects to other pages, but I’m struggling to find a way to do this from the javascript side.

To get things temporarily working, I’ve been using the LiveSocket’s private historyRedirect function. This seems to work reasonably well, though I’m getting some rather unexpected behaviour when using the browser back button. I was also able to get things working using the LiveSocket’s public execJS function by passing it the “navigate” kind and appropriate arguments, but unfortunately was still having issues with the browser’s back button seeming to go two pages back, rather than just to the immediately previous page.

I was wondering if anyone had any advice on a proper way to go about triggering a live redirect from the JS side of things?


It feels like the strange back-button behaviour is likely related to me going about things the wrong way, as it works exactly as expected when clicking on navigate links in the UI. Happy to provide more details if it would be helpful! :smiley:

First Post!

tfwright

tfwright

It does seem like this should be easier, but every example I’ve seen of redirecting from the client side that is not a link involved pushEvent + server side redirect. Would love to be corrected though

Last Post!

JohnnyCurran

JohnnyCurran

Does the Phoenix.LiveView.JS.navigate/1 do what you need? Phoenix.LiveView.JS — Phoenix LiveView v1.2.5

You can bind those to the phx-* event handlers:

<input phx-keydown={JS.navigate(to: "/")}>

Where Next?

Popular in Questions Top

hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

Other popular topics Top

vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 55125 245
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 31586 112
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 44778 311
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement