I'd like to run ERB on a coffeescript file. Apparently, this can be done if placed on a view, but where exactly do I place the file?

Question

There's some ERB code I'd like to run on a coffeescript file. Currently I have a controller named "places", and I'm working something on its index.

I have an index.html.haml on it, and I've managed to get coffeescript going from the assets pipeline (named places.js.coffee), but I haven't found a way to make ERB code to run from it. I read that it is possible to do this if the coffeescript is in your views. I've tried to place a coffeescript file named "index.js.coffee" inside the controller's view, but it doesn't work.

The file I tried to created is: /app/views/places/index.js.coffee

Am I using the wrong name? And/If-not, where should I place the file?

I'm on rails 4.0.2 with the coffee-rails gem (4.0.1).

Thanks in advance.

EDIT:

What I'm trying to accomplish is to use erb to inject code into the js/coffee, specifically - a set of arrays which will be used to fill data in a chart.

Normally, I'd have something like this in the places.js.coffee assets file:

labelsvariable = gon.labels

jQuery ->
data = {
    labels : labelsvariable,
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [ 65,59,90,81,56,55,40 ]
        },
        ...
    ]
}

That works, I can use some data for the chart, but then I need to do more complex things, such as populating the datasets.

I know I could replace many of those with variables themselves, just like 'labelsvariable', but my problem comes when I bring a set of arrays that is to be included where the second data group is in the JQuery. I figured I could make a loop with erb, that could go through the array, replacing the whole datasets section, dumping the appropriate code for js/coffee.

I realize I may be taking the wrong approach, but I just couldn't come up with a better idea to send the data there. Any suggestions on that regard would be appreciated.

In regards to my original question, is it possible to run erb like this in a coffee file? If so, where should the coffee-file-that-also-runs-erb be placed?

Forgive me if I sound too vague, I'm having a really hard time to explain this. Thanks.

score 1 · Answer 1 · answered Jan 22 '14 at 05:16

You can't render both index.html.erb/haml and index.js.coffee at the same time. Like the other answer mentioned, you'd typically render the .erb file on a normal page load, and the .js file to run Javascript on an already-loaded page as the response to an AJAX request.

I'm not sure I 100% understand what you're trying to achieve, but could you output the data into your HTML somewhere then pull it from the HTML with jQuery? Something like this:

In index.html.erb:

<div id="chart" data-datasets="<%= @data.to_json %>">
  Blah blah blah.
</div>

Then in a .js.coffee file that's in your assets pipeline (i.e. somewhere under app/assets/javascripts):

$ ->
  datasets = $("#chart").data("datasets")

  data = {
    labels : labelsvariable,
    datasets : datasets
  }

I don't know where you're pulling the datasets data from but you might need to create a custom method (i.e., something other than to_json) that will output the data in a format that the javascript will understand.

In the HTML you don't necessarily have to put the data-datasets attribute on a <div> tag, I'd put it somewhere that's relevant to the part of the page the data gets used in.

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

The idea that you have to load it from your view is from the Rails documentation (I've lost it, sorry) (Error using erb in js.coffee files in the rails asset pipeline) which states that only assets should be placed in the asset pipeline

The way to load logic / conditional (erb) code into your JS is to include those files in the views, as that's the only place where the logic will work

This leaves your problem

Views

You'd get a better answer if you detailed what you want to do

I'll explain how you can call the JS from your views. The only way is when you call the page with Ajax (it sends the JS mime-type), like this:

#app/controllers/your_controller.rb
def action
   respond_to do |format|
       format.html
       format.js # loads action.js.erb IF you send a JS (ajax) request type
   end
end

If you provide more information on what you're trying to do, I can give you some specific ideas on how to implement!

edited May 23 '17 at 12:15

Community

1
1

answered Jan 19 '14 at 12:32

Richard Peck

76,116
9
93
147

1

Basically i'm trying to run a loop to read from an array, using erb instead of coffescript/javascript. One reason for that is cause I feel more comfortable with erb, but also cause I don't know how to break down an array to populate a JQuery function that'd be processed under js/coffee. The JQuery function is to populate the data of a chart made with Chart.js. I'll update the question to demonstrate the point. – dev404 Jan 19 '14 at 21:04
So you're *really* looking for how to port Rails vars into JS? You may wish to look at [`gon`](https://github.com/gazay/gon) to do this :) – Richard Peck Jan 19 '14 at 21:25
Done that. I was editing the question a second time when I saw your reply. I'm using gon, but I don't know how to use the array in the section mentioned. – dev404 Jan 19 '14 at 21:30
Well JQuery is very similar to Rails - I would take the same approach you would in Rails, and translate over to JS. I'll take a look at your answer and see if I can provide something for you! – Richard Peck Jan 19 '14 at 21:42

I'd like to run ERB on a coffeescript file. Apparently, this can be done if placed on a view, but where exactly do I place the file?

2 Answers2