Uncaught TypeError: [Object] has no method 'attachinary'

[algritz]

hello all. I followed the installation instructions on the main page

using this way of calling the file upload:
<%= f.attachinary_file_field :photo %>

but when I load my form, I get this javascript error :

$('.attachinary-input').attachinary(); Uncaught TypeError: Object [object Object] has no method 'attachinary'

Which leads me to believe that the fileupload widget doesn't load at all and ends up being the cause of my error when I submit my form.

I made sure that the .attachinary method is actually called by doing a simple "alert", which has been called. So, if I get it right, its the ".attachinary-input" declaration that isn't completed correctly despite the Object being created.

I just don't know how to fix this, any help appreciated

I'm using rails 3.2.6
windows 7
Ruby 1.9.3
attachinary 1.1.0
carrierwave 0.7.0

[assembler]

have you included both cloudinary and attachinary javascript files through asset pipeline?

//= require cloudinary
//= require attachinary

[algritz]

Yes, they are at the bottom of my application.js file.

I also made sure they are loaded by looking at the source of my page once it is rendered

[assembler]

Can you send me the full js stack trace, or if you could share the code i'll be glad to help you out..

[algritz]

Sure, here's the repository

https://github.com/algritz/Livre_recette_v3/tree/add_image_support

note: most of the "UI" of the app is in French, but the code is in English, so you should still be able to dig inside it.

I can put the app on heroku if you want to test it by yourself and not have to deal with the installation.

Edit :

I've setup the app on heroku so that you can test by yourself.

login with

test_user@invalidemail.com / allo123

You should be able to see the error on this page :

https://livre-recettes-v3.herokuapp.com/recettes/new

A big thanks for your help!

[algritz]

Uncaught TypeError: Object [object Object] has no method 'attachinary' => happens on recettes.js at line 5

which happens to be :

$('.attachinary-input').attachinary();

[assembler]

The problem is here:
https://github.com/algritz/Livre_recette_v3/blob/add_image_support/app/assets/javascripts/recettes.js.coffee#L5

Whitespace is significant in coffeescript. Your code actually compiles into this:

$(document).ready(function() {});
$('.attachinary-input').attachinary();

And it fires .attachinary() before the dom is loaded, and since you're requiring that file before the attachinary one (https://github.com/algritz/Livre_recette_v3/blob/add_image_support/app/assets/javascripts/application.js#L15) it raises an exception.

Solution

You need to add 2 spaces on former line, so it looks like this:

$(document).ready -> 
  $('.attachinary-input').attachinary()

Also, make sure that you put //= require_tree . always after all other dependencies. It is not required in this case, but is a good practice.

[algritz]

Issue is fixed, a big thanks for your help.

I didn't knew about the significance of the whitespaces in coffescript, well now I know.

Side note : I had to re-precompile my assets in order to get it working, not a big deal, but I'm writing it down in case someone else gets the same issue as I did.