error to translate jquery code to coffeescript code

Question

this jquery code works fine for me in jquery format.

I want convert this jquery code to coffeescript code:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {  
      $('.preview_browse img#thumb').attr('src', e.target.result).width(251).show();
    };
    reader.readAsDataURL(input.files[0]);
    $('.not_found_image_browse').hide();
  }
}

I get from http://js2coffee.org/ this code:

readURL = (input) ->
  if input.files and input.files[0]
    reader = new FileReader()
    reader.onload = (e) ->
      $(".preview_browse img#thumb").attr("src", e.target.result).width(251).show()
    reader.readAsDataURL input.files[0]
    $(".not_found_image_browse").hide()

but when I enter this code in my project rails in post.js.coffee does not works fine for me.

I get in browser console this error:

readURL is not defined
onchange()onchange (line 2)
event = change
[Break On This Error]   
readURL(this);

This is my html code in my input file:

<input id="post_image" class="file required" type="file" onchange="readURL(this)" name="post[image]">

Where are you putting this JavaScript (CoffeeScript) code? My guess is that readURL isn't in the global scope, so the onchange doesn't work. — gen_Eric
– gen_Eric, Commented May 7, 2012 at 15:02
Why are you using an onchange attribute when you have jQuery? Why not use jQuery to bind to the event? — mu is too short
– mu is too short, Commented May 7, 2012 at 15:13
Thank you @muistooshort can you write a example without onchange? Thank you! — hyperrjas
– hyperrjas, Commented May 7, 2012 at 15:15
@hyperrjas: $('#post_image').change(function(){ readURL(this); });. — gen_Eric
– gen_Eric, Commented May 7, 2012 at 15:25

Community · Accepted Answer · 2020-06-20 09:12:55Z

By default all methods are defined in a closure in coffeescript so you have to explicitly put the method or object into the context of the window for it to be visible from the input's onchange attribute:

window.readURL = (input) ->
  if input.files and input.files[0]
    reader = new FileReader()
    reader.onload = (e) ->
      $(".preview_browse img#thumb").attr("src", e.target.result).width(251).show()
    reader.readAsDataURL input.files[0]
    $(".not_found_image_browse").hide()

From http://coffeescript.org/

Although suppressed within this documentation for clarity, all CoffeeScript output is wrapped in an anonymous function: (function(){ ... })(); This safety wrapper, combined with the automatic generation of the var keyword, make it exceedingly difficult to pollute the global namespace by accident.

If you'd like to create top-level variables for other scripts to use, attach them as properties on window, or on the exports object in CommonJS. The existential operator (covered below), gives you a reliable way to figure out where to add them; if you're targeting both CommonJS and the browser: exports ? this

Collectives™ on Stack Overflow

error to translate jquery code to coffeescript code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related