0

I try to add js actions in my ruby app. I read The asset pipeline & Working with JavaScript in Rails guides but I can't reproduce what is described in the second one. I'm a beginner in rails so perhaps I made too much "manipulations" with files, there extensions...

I have

a controller "mycontroller" app/controllers/mycontroller_controller.rb

class mycontrollerController < ApplicationController
    def new
    end
end

application.js app/assets/javascripts

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

mycontroller.coffee app/assets/javascripts

When I load the app in a browser, assets seem to be correctly included

<script src="/assets/mycontroller-d915d2e33a0815bf7b1ac3c478a90599.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-fdae31866ddfa65ac8bed4781fb60a9c.js?body=1" data-turbolinks-track="true"></script>

Question: do I have to rename .coffee files in .js.coffee? I tried but nothing change.

I followed "Working with JavaScript in Rails" and modified my files like that:

new.html.erb app/views/mycontroller

<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>

mycontroller.coffee app/assets/javascripts

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
      element.style.color = textColor

I think coffee script is correctly compiled :

(function() {
    var paintIt;

        paintIt = function(element, backgroundColor, textColor) {
            element.style.backgroundColor = backgroundColor;
            if (textColor != null) {
                return element.style.color = textColor;
            }
        };

 }).call(this);

But nothing happens by clicking... any idea ?

Thanks in advance for our help.

Firmin
  • 15
  • 7
  • Are there any error related to javascript in Javascript console of Google Chrome? And, which environments does your rails app run on such as development, test or production? – shoji Feb 07 '15 at 13:16
  • Indeed, I have this error : `Uncaught ReferenceError: paintIt is not defined onclick`. Otherwise, my app runs on local server so in dev environment I think. Thanks. – Firmin Feb 07 '15 at 13:56

1 Answers1

2

The issue is that CoffeeScripts are intended to communicate with the DOM in an "unobtrusive way", so that you don't see any signs of JS in your HTML. And this happens because your script is compiled as a self-executing anonymous function, that isolates its scope from the global namespace. paintIt doesn't "leak" outside. It's by design (and here's some explaination on this). You need to do that differently.

To distinguish attributes' purpose, I personally place any behaviour-related stuff in data-* attributes and bind events on selectors like [data-paint], that indicate presence of such attributes. I suggest you rewrite your HTML like so:

<a href="#" data-paint="#990000">Paint it red</a>

Then handle the click event for each data-paint:

$("[data-paint]").on "click", ->
    # `@` is basically `this` and `@thing` is `this.thing`
    # `@dataset` contains the data attributes of the given element
    @style.color = @dataset.paint

A-a-and you're done. See the JSFiddle.

Community
  • 1
  • 1
D-side
  • 9,150
  • 3
  • 28
  • 44
  • I tried but it doesn't work in my case. Perhaps I have to continue my general learning about ruby and its concepts and I'll try later to learn more specifics points like js and coffescripts. Thanks for you time and your help. – Firmin Feb 08 '15 at 10:35
  • I created a new app, tried your answer and it works. So as I though I certainly did too much manipulation and corrupted my app. however, the coloring is applied only when I hold the click. Is this normal behavior for you? Thanks. – Firmin Feb 08 '15 at 11:05
  • It's not normal, but there is no such effect written in code. May be browser-specific. May be related to the fact that this click is applied to ``, which is not a too-often-used element for clicking on. – D-side Feb 08 '15 at 11:26