I have a question regarding updating a container. I have an image, which is resized in the background using a delayed job. On finish, it sets an attribute to false. The view is checking this attribute each 500ms. After completing, the view should update the image and give the user a crop-box.
开发者_运维问答So far everything looks like:
<div id='edit_image'>
<div class='image'>
<img alt="spinner" src="/images/spinner.gif" />
</div>
</div>
$(window).load(function() {
var jcrop_api;
image_crop = $.Jcrop('#imagecrop',
{
aspectRatio: 430 / 575,
trueSize: [#{@asset.image.width}, #{@asset.image.height}],
minSize: [430, 575],
allowSelect: false,
onChange: updateCrop,
onSelect: updateCrop
});
imagecrop_api.setSelect(#{to_jcrop(@asset.crop)});
});
function updateCrop(c) {
$('#image_crop').val(c.w +"x"+ c.h +"+"+ c.x +"+"+ c.y);
};
$(document).ready(function() {
var refresh_timer = setInterval(check_image_status, 200);
function check_image_status() {
$.post('/assets/' + "#{@asset.id}" + '/asset_resizing',
function(data) {
if (data == false) {
$('.image').html('#{ image_tag @asset.image.url, :id => 'edit_image', :class => 'image'}');
clearInterval(refresh_timer);
} else {
return false;
}
});
};
});
The image is successfully loaded and the container updated. The only problem is, that I can't crop anymore after that. If I load the image directly, the cropping works. Thanks for advice.
Hey. If you render a update.js.erb to handle the response from the server, I guess you'll have to put this code in the update.js.erb file.
$(window).load(function() {
var jcrop_api;
image_crop = $.Jcrop('#imagecrop',
{
aspectRatio: 430 / 575,
trueSize: [#{@asset.image.width}, #{@asset.image.height}],
minSize: [430, 575],
allowSelect: false,
onChange: updateCrop,
onSelect: updateCrop
});
imagecrop_api.setSelect(#{to_jcrop(@asset.crop)});
});
精彩评论