Send data from Phoenix to Javascript in Slim template

Question

I have figured out a way to do this, defining a variable inside a HTML attribute like this:

div data-name=some_var id="component"

Then from Javascript I can retrieve it:

alert($("#component").data("name"));

However, it looks very ugly to me. Is there another way to achieve this?

The only other way is through a request (additional architectural considerations) or storing it in a cookie (additional code and complexity to retrieve the value). Although I do agree that theoretically it's a bit ugly having to embed data in the html for javascript consumption, it's the simplest way and I feel a bit better about it by using meta tags and removing the element from the DOM after it has been read in the front-end. — m3characters
– m3characters, Commented Mar 12, 2018 at 10:31
Ok, looks like this is the best solution for now, meta tags is a good idea if we have to use html tags anyway — lapinkoira
– lapinkoira, Commented Mar 12, 2018 at 10:47
you can also define a script tag that sets it on the window scope — m3characters
– m3characters, Commented Mar 12, 2018 at 11:43

Sheharyar · Accepted Answer · 2018-03-12 10:16:18Z

1

That might feel dirty to you, but that's the most efficient way of sending data to the frontend from the backend. In fact, it's pretty common.

Other ways of sending data would always involve making a separate web-request, which is usually unneeded in most cases.

And since you're using jQuery, it also abstracts away the implementation so you can send a pure JSON object in a data- attribute and can use it without having to parse it on the client-side.

div id='item' data-obj='{"foo":"bar"}'

and in your JS:

$('#item').data('obj') // {foo: bar}

Related resources:

Stackoverflow: Store JSON object in data attribute in HTML jQuery
MDN: Use Data Attributes
Blog Post: Using HTML 5 Data Attributes

edited Mar 12, 2018 at 10:16

answered Mar 12, 2018 at 10:02

Sheharyar

76.1k21 gold badges176 silver badges223 bronze badges

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

Comments

Klesun · Accepted Answer · 2020-02-17 17:55:27Z

1

I usualy do it like this:

div id="component"
javascript:
  var templateData = {
    name: '<%= @name %>',
    product_str: '<%= Poison.encode!(@product) %>',
  };

You'll probably need to install Poison to encode data to JSON.

answered Feb 17, 2020 at 17:55

Klesun

14.1k7 gold badges66 silver badges60 bronze badges

Collectives™ on Stack Overflow

Send data from Phoenix to Javascript in Slim template

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related