How to pass Ruby variables to a JavaScript function in a Rails view?

by

A few options:

escape_javascript

Alias: j.

Works only on strings.

Escapes characters that can have special meanings in Javascript strings,
like backslash escapes, into a format suitable to put inside Javascript string literal quotes.

Maintains html_safe status of input,
so needs html_safe otherwise special HTML chars like < would get escaped into &lt;.

<% a = "\\n<" %>
<%= javascript_tag do %>
  '<%= j(a)           %>' === '\\n&lt;'
  '<%= j(a).html_safe %>' === '\\n<'
<% end %>

to_json + html_safe

As mentioned by Vyacheslav, go upvote him.

Works because JSON is almost a subset of Javascript object literal notation.

Works not only on hash objects, but also on strings, arrays and integers which are
converted to JSON fragments of the corresponding data type.

<% data = { key1: 'val1', key2: 'val2' } %>
<%= javascript_tag do %>
  var data = <%= data.to_json.html_safe %>
  data.key1 === 'val1'
  data.key2 === 'val2'
<% end %>

data- attributes

Add values to attributes, retrieve them with Javascript DOM operations.

Better with the content_tag helper:

<%= content_tag 'div', '', id: 'data', data: {key1: 'val1', key2: 'val2'} %>
<%= javascript_tag do %>
  $('#data').data('key1') === 'val1'
  $('#data').data('key2') === 'val2'
<% end %>

Sometimes called “unobtrusive Javascript”.

gon

Library specialized for the job: https://github.com/gazay/gon

Probably the most robust solution.

Gemfile:

gem 'gon'

Controller:

gon.key1 = 'val1'
gon.key2 = 'val2'

Layout app/views/layouts/application.html.erb:

<html>
<head>
  <meta charset="utf-8"/>
  <%= include_gon %>

View:

<%= javascript_tag do %>
  gon.key1 === 'val1'
  gon.key2 === 'val2'
<% end %>

See also

More Related Contents:

  1. Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
  2. AngularJS- Login and Authentication in each route and controller
  3. Find DOM element by ID when ID contains square brackets?
  4. Best way to add page specific JavaScript in a Rails 3 app?
  5. Trigger an event with Prototype
  6. Object doesn’t support this property or method Rails Windows 64bit
  7. Rails 5: how to use $(document).ready() with turbo-links
  8. Why escape_javascript before rendering a partial?
  9. JavaScript file per view in Rails
  10. Uncaught ReferenceError: React is not defined
  11. Rails javascript only works after reload
  12. Ways to add javascript files dynamically in a page
  13. How to pass a javascript variable into a erb code in a js view?
  14. Rails js.erb file cannot find method “render”
  15. Facebook App: localhost no longer works as app domain
  16. Rails flash notice via ajax
  17. Rails, javascript not loading after clicking through link_to helper
  18. ExecJS::ProgramError: Unexpected token punc «(», expected punc «:» when running rake assets:precompile on production
  19. “Can’t find variable” error with Rails 3.1 and Coffeescript
  20. Ajax Binary Response
  21. Single Page Application and CSRF Token
  22. Iterating over every property of an object in javascript using Prototype?
  23. Why “Prevent this page from creating additional dialogs” appears in the alert box?
  24. Using Ruby variable in Javascript (In App View)
  25. Img src path with header params to pass
  26. Rails 5/6: How to include JS functions with webpacker?
  27. Like button Ajax in Ruby on Rails
  28. Ruby on Rails – Send JavaScript variable from controller to external Javascript asset file
  29. rails and backbone working together
  30. How to avoid conflict between JQuery and Prototype

Leave a Comment