Question

我有一个关于更新容器的问题。我有一个图像，在大小调整使用延迟工作的背景。完成后，它将属性设置为false。视图每500ms检查一次该属性。完成后，视图应更新图像并为用户提供裁剪框。

到目前为止，所有内容都是：

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

图像已成功加载并且容器已更新。唯一的问题是，之后我不能再裁剪了。如果我直接加载图像，裁剪工作。谢谢你的建议。

Answer 1

嘿。如果你渲染一个update.js.erb来处理来自服务器的响应，我想你必须把这段代码放在update.js.erb文件中。

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

    });

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

1 个答案: