Hi everyone,
I’m working on a Phoenix Live View application where I wanted to achieve client-side navigation triggered by a user’s selection in a select element. The user selects an option, and the application navigates to the corresponding path without a full page reload.
Initially, I explored using phx-click
on each option, but it did not generate any event. Moving to the select element itself, I had trouble accessing the selected value.
My current approach utilizes phx-change
to trigger a custom event named "live_view_navigate"
. Within the event listener, I access the selected value from the event object’s target.value
. And trigger a JS.patch
via liveview.execJS
.
Here’s the interesting part:
in app.js
window.addEventListener("live_view_navigate", event => {
const path = event.target.value;
const encodedJS = '[["patch",{"replace":false,"href":"' + path + '"}]]';
liveSocket.execJS(event.target, encodedJS)
});
And in the html:
<select id="current-tab" name="current-tab" phx-change={JS.dispatch("live_view_navigate")} >
<%= for option <- @options do %>
<option value={option.path} selected={option[:current]}><%= option.label
</option>
<% end %>
</select>
This code constructs a JavaScript array representing a patch operation. It then uses liveSocket.execJS
to execute this patch directly on the select element, achieving navigation without a server roundtrip.
My question:
Is this the recommended approach for achieving client-side navigation based on a select element in Phoenix Live View? Is there a cleaner or more efficient way to accomplish this functionality?
Thanks in advance for your insights!