Ruby on rails: using javascript variable in <%= %> tags in Html.erb

Question

I am trying to use insert an Javascript variable in the <%= %> tags but it prints the variable name verbose. Here is my code

<script>
     function getGraph(agency,device_id)
      {
            var i = document.createElement('img'); 
            i.src = '<%= show_graph_hcfcd_url('device_id') %>'; 
            $(graphDiv).appendChild(i); 
      }
</script>

Now the Problem is URL gets generated just fine except instead of value of device_id, 'device_id' appears in the rest url.

Any clues how to get over this?

Remove the quotes. If it is a string variable, you would not surround it with quotes. — Fareesh Vijayarangam
– Fareesh Vijayarangam, Commented May 9, 2011 at 18:39
@Bryan Drewery: the code of show_graph_hcfcd_url is okay and it works. I have tested the url separately. Problem is to generate the correct url. — Shaunak
– Shaunak, Commented May 9, 2011 at 18:41
@Fareesh : If i remove those quotes it considers the device_id as ruby variable which is wrong. by putting quotes it puts the device_id verbose in the url. For now i am then using the replace() function in javascript to replace it with variable. — Shaunak
– Shaunak, Commented May 9, 2011 at 18:43

montrealmike · Accepted Answer · 2012-07-25 20:08:43Z

10

<%= %> will interpret the code on the server

and javascript variable is available to change on the client. So doing

<%= show_graph_hcfcd_url('device_id') %>

is probably not be the correct way of doing this.

You might want to try to put the url(s) in the data attibute of the element:

<div id="device_id" data-url="<%= show_graph_hcfcd_url(@device.id) %>">...</div>

<script>
     function getGraph(agency,device_id)
      {
            var i = document.createElement('img'); 
            i.src = $(device_id).data("url"); 
            $(graphDiv).appendChild(i); 
      }
</script>

also see

http://railscasts.com/episodes/324-passing-data-to-javascript

There's a good gem to do this called "gon"

edited Jul 25, 2012 at 20:08

answered Jul 25, 2012 at 17:05

montrealmike

11.7k10 gold badges68 silver badges87 bronze badges

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

Comments

Shaunak · Accepted Answer · 2011-05-09 18:50:14Z

2

Here is how i have solved this for now:

<script>
     function getGraph(agency,device_id)
      {

            var i = document.createElement('img'); 
            var url = '<%= show_graph_hcfcd_url('device_id') %>'; //new change
            url = url.replace('device_id',""+(device_id*1000));   //new change
            i.src = url;
            $(graphDiv).innerHTML = "";
            $(graphDiv).appendChild(i); 
      }
  </script>

The lines in the bold show what i did. Basically replaced the "device_id" in the url with its value.

But I am still hoping for a more elegant solution.

answered May 9, 2011 at 18:50

Shaunak

18.2k5 gold badges59 silver badges86 bronze badges

1 Comment

Shevaun Over a year ago

I don't think there's a an elegant solution to this problem. My solution was to replace the actual url with the root url and append the path and parameter: var url = "<%= root_url %>graph_hcfcd/"+device_id;

Collectives™ on Stack Overflow

Ruby on rails: using javascript variable in <%= %> tags in Html.erb

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related