一切似乎都已加载(jquery, jcrop和我的avatar.js文件)。我似乎不知道发生了什么事。我的脚本按照以下顺序加载:
<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。咖啡包含以下内容:
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'
在javascript控制台,我得到:
Uncaught TypeError: Object [object Object] has no method 'Jcrop'
问题是jQuery.noConflict();
我也面临着同样的问题。我的问题得到解决,当我把我的jquery文件在jcrop.js.