Rails + jQuery：更新容器后裁剪不起作用

Question

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.

Answer 1

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)});

    });