Uncaught TypeError: Object [object Object] has no method 'Jcrop'

Question

Everything seems to be loaded (jquery, jcrop, and my avatar.js file). I can't seem to figure out what's going on. My scripts are being loaded in the following order:

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.Jcrop.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.base.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.googlemaps.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/vendor/jquery.ui.widget.js?body=1" type="text/javascript">         </script>
<script src="/assets/jquery-fileupload/jquery.iframe-transport.js?body=1" type="text/javascript">    </script>
<script src="/assets/jquery-fileupload/jquery.fileupload.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/basic.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/vendor/tmpl.js?body=1" type="text/javascript"></script>
<script src="/assets/avatars.js?body=1" type="text/javascript"></script>

avatars.js.coffee contains the following:

jQuery ->
  new AvatarCropper()

class AvatarCropper
  constructor: ->
    $('#cropbox').Jcrop
      aspectRatio: 1
      setSelect: [0, 0, 600, 600]
      onSelect: @update
      onChange: @update

  update: (coords) =>
      $('#avatar_crop_x').val(coords.x)
      $('#avatar_crop_y').val(coords.y)
      $('#avatar_crop_w').val(coords.w)
      $('#avatar_crop_h').val(coords.h)
      @updatePreview(coords)

    updatePreview: (coords) =>
      $('#preview').css
        width: Math.round(100/coords.w * $('#cropbox').width()) + 'px'
        height: Math.round(100/coords.h * $('#cropbox').height()) + 'px'  
        marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px'
        marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'

In the javascript console i'm getting:

Uncaught TypeError: Object [object Object] has no method 'Jcrop' 

Any help would be GREATLY appreciated.

Answer 1

The problem was a jQuery.noConflict(); call in another script...