azimlord

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

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

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.

pedromvieira

pedromvieira

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"]

Last Post!

azimlord

azimlord

Awesome. This works really well. Thanks bryanjos!

Where Next?

Popular in Questions Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
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
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New

Other popular topics Top

openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
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

We're in Beta

About us Mission Statement