CoffeeScript - How to work with coffeescript in ruby on rails?

Question

I am working with CoffeeScript in Ruby on rails. And I am using http://js2.coffee/ to convert my javascript and jquery into CoffeeScript.

We know, Ruby on Rails provides us by default .coffee files when we create any controller.

In my view folder, I have defined a test.html.erb file, I have a button

<button id="p">try</button>

and if I define the script for this button by using javascript or jquery in the same page i.e. test.html.erb it works.

My javascript code

document.getElementById("p").onclick = function() {myFunction()};
function myFunction() {
    alert("hello");
}

and my jquery

$(document).ready(function(){
    $("#p").click(function(){
        alert("hello");
    });
});

And now I have created a custom file in app/assets/javascripts/test.coffee

coffeescript of my jquery code

$(document).ready ->
  $('#p').click ->
    alert 'hello'
    return
  return

and when I use this in my test.coffee it works fine.

coffeescript of javascript code

myFunction = ->
  alert 'hello'
  return

document.getElementById('p').onclick = ->
  myFunction()
  return

and when I use this code in my test.coffee it shows error in my console

Uncaught TypeError: Cannot set property 'onclick' of null

I have also try the test.js.coffee but still get the same error

so should I only use the coffeescript generated by jquery or is there any way to use the coffeescript generated by javascript?

Talha Junaid · Accepted Answer · 2018-11-30 07:15:41Z

4

The problem is element_with_id "p" is not found on the page because coffeescript is being load before the page load. Wrap your code inside document.ready this will call the coffeescript once the page is completed loaded.

$(document).ready ->
  myFunction = ->
   alert 'hello'
   return

  document.getElementById('p').onclick = ->
    myFunction()
    return

answered Nov 30, 2018 at 7:15

Talha Junaid

9541 gold badge7 silver badges15 bronze badges

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

1 Comment

shashi verma Over a year ago

Thanks, that was my mistake, I did not know that

killernova · Accepted Answer · 2018-11-30 07:19:35Z

1

Your first method is called after document ready, but your last one is called earlier than the first one in which time the element with id of 'p' may haven't created yet, so document.getElementById('p') return null, and raise the error above.

answered Nov 30, 2018 at 7:19

killernova

1701 silver badge12 bronze badges

1 Comment

shashi verma Over a year ago

Thanks, that was my mistake, I did not know that

Varinder Sohal · Accepted Answer · 2018-11-30 10:38:56Z

0

We can add java-script using back-tick(`) in coffee-scripts.

window.onload = ->
   `document.getElementById("demo").onclick = function() {myFunction()};

   function myFunction() {
       document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
   }`

answered Nov 30, 2018 at 10:38

Varinder Sohal

1,3026 gold badges26 silver badges51 bronze badges

Collectives™ on Stack Overflow

CoffeeScript - How to work with coffeescript in ruby on rails?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related