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!
1 Like
Nevermind. Misread your post!
NobbZ
July 14, 2018, 5:46pm
3
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.
3 Likes
Thanks NobbZ. That make sense. I guess I have to do it manually then. If anyone have any suggestion to do this, that would be great!
You can write a cookie and retrieve it via conn.
write
document.cookie = 'time_from_utc=' + time_from_utc + ';path=/'
read
conn.cookies["time_from_utc"]
1 Like
NobbZ
July 15, 2018, 12:44pm
6
That doesn’t make much sense, as it requires a reload of the page and potentially affects all tabs and future ones.
Setting and applying a filter should perhaps happen oin a classic AJAX or AJAJ request. Or simply trigger a full request with a query parameter set.
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>
1 Like
Awesome. This works really well. Thanks bryanjos!