How can I pass a ruby(rails) variable into Javascript?

Question

This is an app in rails.

Here's what I have in 'routes':

 resources :destinations

Here is what I have in 'destinations_controller':

def show
     @destination = Destination.find(params[:id])
end

Here's what I have in 'views/destinations/show.html.erb':

<h2><%= @destination.latitude %></h2>

<script>

    var dest_lat = <%= @destination.latitude %>

</script>

Here's what I have in 'application.js':

var dest_location = {dest_lat};

This is the third time I've built this app. Initially, I get no errors and all the coding works fine... for a few hours. Then, without me changing anything, the value in @destination.latitude still appears in the h2 tag, but I start to receive the error:

Uncaught ReferenceError: dest_lat is not defined

with a link that shows its use in 'application.js', and the app ceases to work.

Why?

Any help is appreciated.

It's likely that @destination.latitude is not outputting anything. — evolutionxbox
– evolutionxbox, Commented Mar 27, 2017 at 10:21
Or that application.js is being loaded before the on page script is evaluated, depending on where the two scripts tags are relative to each other on he page. — Paul
– Paul, Commented Mar 27, 2017 at 10:33
@evolutionxbox '@destination.latitude' definitely outputs something. I have it in an h2 in the same show page and that prints out fine. It only breaks when it runs through the js. — bloomers
– bloomers, Commented Mar 27, 2017 at 14:07
@paul Improper loading order would be my guess. How might I fix that? — bloomers
– bloomers, Commented Mar 27, 2017 at 14:08

Sebastián Palma · Accepted Answer · 2017-03-27 17:36:52Z

6

This isn't printing something useful for Javascript:

<script>
    var dest_lat = <%= @destination.latitude %>
</script>

Try instead to change it to:

<script>
    var dest_lat = '<%= @destination.latitude %>';
</script>

Here you can see that the quotes make the difference.

var dest_lat = some_value;

var dest_lat = 'some_value';
console.log(dest_lat);

Update: To make your data available in your application.js you can store them in a non-visible div, with content_tag, which will content your @destination.latitude and anything else you need to work

# your_view.html.erb
<%= content_tag :div, class: 'destination_latitude', data: {destination_latitude: @destination.latitude} do %>
<% end %>

Then you can access to them as a Javascript object:

document.addEventListener('DOMContentLoaded', function(e) {
  console.log($('.destination_latitude').data('destination-latitude'));
});

edited Mar 27, 2017 at 17:36

answered Mar 27, 2017 at 12:30

Sebastián Palma

33.6k6 gold badges45 silver badges65 bronze badges

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

2 Comments

bloomers Over a year ago

Thanks for the quick response. Unfortunately, I tried what you said and nothing changed.

bloomers Over a year ago

I looked at gon briefly. I would really rather avoid throwing yet another gem into the mix, especially since what I'm doing theoretically shouldn't require a gem.

Paul · Accepted Answer · 2017-03-27 17:19:39Z

1

Check your rendered HTML output. As I said in my comment, I'm guessing that the script tag with the src pointing at your javascript file(s) is being called before the script tag with the embedded javascript. The fix is to just change the order that they're declared on the page, but the specifics will depend on how your layouts, pages, and partials are setup (which I can't tell from your posted question).

When all is said and done, you'll have something like:

<script type='text/javascript'>
  // Your embedded script
</script>
<script src='/path/to/application.js' type='text/javascript'></script>

in your rendered output.

answered Mar 27, 2017 at 17:19

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Collectives™ on Stack Overflow

How can I pass a ruby(rails) variable into Javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related