How to use a Phoenix controller variable in JavaScript?

Question

How do I use a variable from Phoenix controller in my JavaScript?

I'm using React for front-end.

I can't use <%= ... %> in JavaScript.

defmodule Familytree.PageController do
  use Familytree.Web, :controller

  alias Familytree.Users
  alias Familytree.Tags
  alias Familytree.UserTag

  plug Familytree.Plugs.Auth
  plug :scrub_params, "users" when action in [:create, :update]
  plug :scrub_params, "tags" when action in [:add_tag,:delete_tag]

  def index(conn, _params) do
    users = Repo.all(Users)
    tags = Repo.all(Tags)
    render(conn, "index.html", users: users, tags: tags, current_user: get_session(conn, :current_user))
  end
end

Do you want to load the data only once on the initial page load? — Dogbert
– Dogbert, Commented Apr 25, 2016 at 13:06
yes. I need that object because I'm doing search bar so I need all the names from that object — ake
– ake, Commented Apr 25, 2016 at 13:08

Paweł Dawczak · Accepted Answer · 2016-04-25 11:12:03Z

2

You could try rendering the value in view to build HTML attribute and then obtain this with your JavaScript, which is rather common prctice.

Something like this could do:

my_view.eex

<div data-name="<%= @some_name_from_controller %>" id="component">
</div>

script.js

var name = $("#component").data("name");

You can find more about data here

Hope that helps!

answered Apr 25, 2016 at 11:12

Paweł Dawczak

9,6492 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ake Over a year ago

yeah that doesn't work for me. maybe I'm doing something wrong I don't know. when I put this line <div data-name="<%= @users %>" id="ake"></div> I get argument error

Paweł Dawczak Over a year ago

@ake What kind of error are you receiving? Could you provide more information and paste more code (eg. from your controller)?

ake Over a year ago

when I write this line: <div id="ake" data-name="<%= 'at'user %>"></div> I get this error assign @user not available in eex template. In my controller I have: alias Familytree.Users and this is where I have all the information that I need to use in my javascript

Paweł Dawczak Over a year ago

I'm afraid this doesn't provide all information I need to help you. Would you be able to edit your question and provide richer snippets of your code? This could help significantly.

Paweł Dawczak Over a year ago

@ake, quickly glancing through your files it seems you set users in your controller, but in your view, you're trying to access user, thus, the reason you see error assign @user not available in eex template

|

khusnetdinov · Accepted Answer · 2017-04-26 05:32:05Z

0

You can use PhoenixGon it bring all phoenix variables to window scope and you can use all this variables, and it also generate js methods for getting this vars:

def index(conn, _params) do
  put_gon(conn, [users: Repo.all(Users), tags: Repo.all(Tags)])
  render(conn, "index.html", current_user: get_session(conn, :current_user))
end

and use it from browser console or in javascript module:

window.Gon.getAsset('users')
// => [user, user1 ...]

It also helps keep js vars and html.eex vars in different parts and keeps it clear.

edited Apr 26, 2017 at 5:32

answered Apr 25, 2017 at 19:55

khusnetdinov

4305 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to use a Phoenix controller variable in JavaScript?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related