azimlord
Use javascript variable in Phoenix EEx
Hi guys, I encountered an issue where I require a Javascript variable in Phoenix eex
I have a select in my html file
<select id="filterSelect" onchange="changeFilter()">
<option value="1">All</option>
<option value="2">Organizer</option>
<option value="3">User</option>
</select>
Here’s my onchange method for my select
Im using phoenix eex to retrieve the user_path where the user_path need a filter param
<script>
function changeFilter() {
var filtervalue = document.getElementById("filterSelect").value;
window.location.replace('<%= user_path(@conn, :index, filter: filtervalue) %>');
}
</script>
How do I get filtervalue from the Javascript code into my user_path filter param?
Thanks guys!
Marked As Solved
bryanjos
Could you make the value the url instead?
<select id="filterSelect" onchange="changeFilter()">
<option value="<%= user_path(@conn, :index, filter:1) %>">All</option>
<option value="<%= user_path(@conn, :index, filter:2) %>">Organizer</option>
<option value="<%= user_path(@conn, :index, filter:3) %>">User</option>
</select>
<script>
function changeFilter() {
var filterUrl = document.getElementById("filterSelect").value;
window.location.replace(filterUrl);
}
</script>
Another possibility is to create a javascript object in your eex template. It would have the numbers as the keys and the urls as values. You could then use that in your javascript code
<select id="filterSelect" onchange="changeFilter()">
<option value="1">All</option>
<option value="2">Organizer</option>
<option value="3">User</option>
</select>
<script>
var urls = {
1: "<%= user_path(@conn, :index, filter: 1) %>",
2: "<%= user_path(@conn, :index, filter: 2) %>",
3: "<%= user_path(@conn, :index, filter: 3) %>"
}
</script>
<script>
function changeFilter() {
var filterValue = document.getElementById("filterSelect").value;
window.location.replace(urls[filterValue]);
}
</script>
Also Liked
NobbZ
You can not do that, as the elixir code generated from the EEx, that is meant to generate the HTML containing your JavaScript is evaluated on the server.
The JavaScript is evaluated on the client, only after the server has already generated the script.
Last Post!
azimlord
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
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex









