Question

我在这里看到了很多进度条问题，但没有一个能帮助我尝试做什么。基本上，我在Rails 4中有一个视图和一个控制器，用户可以删除与记录关联的图像，然后在删除图像后通过jquery更新图像div。

但删除是通过Fog远程对谷歌存储进行的，这需要几秒钟。我只是想在删除图像时以及在刷新图像div之前显示进度条或微调器等，以便让用户知道页面没有挂起。我有一切工作但进度条。

这就是我所拥有的：

#images_list

删除图像后是否刷新div ID并包含所有图像

控制器操作：

def delete_image
  EntryImage.destroy
  respond_to do |format|
    format.js # js file that refreshes the images div
  end
end

.js文件

$('#images_list').html("<%=j render 'entry/display_images' %>");

一切都很简单。但是，在等待控制器调用.js文件时，如何加载微调器/进度条？

EntryImage.destroy打开Fog连接，进行一些重命名并删除图像。然后当它返回时，调用.js并刷新div。

我确信这不是太难，但我对jquery等很陌生。理想情况下，我希望以简单的'Railsy'方式做到这一点，使用Coffeescript等内置技术，jquery甚至bootstrap（因为我知道它在某个地方有一个进度条，我们已经在项目中使用了bootstrap）。

修改我还要提一下，进度条/微调器应位于视图中心的模态窗口中，以确保用户即使页面已滚动也能看到它，因为该条目有很多图像。

谢谢

EDIT2： 很抱歉发布了这么多代码，但我无法弄清楚为什么第一个答案中建议的方法不起作用 #images_list内的删除按钮不会因某种原因触发隐藏状态，只有第一个（在div之外）有效：

<div id='images_toggle_div' style='display: none;'>
  <div class='well' style='overflow: auto;'>
    <a class="delete-btn" href="#">This one works!</a>
    <div class='hidden' id='spinner'>
      <img alt="Ajaxspinner" src="/assets/ajaxSpinner.gif" style="width: 200px;" />
    </div>

    <script>
      $('.delete-btn').click(function(){
        $('#spinner').toggleClass('hidden');
      });
    </script>

    <div id='images_list'>
      <div class='pull-left bordered'>
        <a href="http://rack.supersecret.com/526-3.jpg" target="_blank"><img alt="526 3" class="small_image" src="http://rack.supersecret.com/526-3.jpg?5090659" title="526-3.jpg (314 x 450)" /></a>
        <div class='tiny'>
          <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">9780767880268</a>
        </div>
        <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>
      </div>
      <div class='pull-left bordered'>
        <a href="http://rack.supersecret.com/526-4.jpg" target="_blank"><img alt="526 4" class="small_image" src="http://rack.supersecret.com/526-4.jpg?5090659" title="526-4.jpg (391 x 500)" /></a>
        <div class='tiny'>
          <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">43396154162</a>
        </div>
        <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>
      </div>
    </div>

Answer 1

你可以通过点击触发的jquery添加一个微调器，例如一个gif或一个font-awesome spinner-icon，然后在你的js-response文件中，当图像返回时将其删除。

在您看来：

%button#delete-btn Delete image

%img.hidden#spinner{src: "assets/spinner.gif"}
#images_list

:javascript
  $('#delete-btn').click(function(){
    $('#spinner').toggleClass('hidden');
  });

在你的.js.erb

中

$('#spinner').toggleClass('hidden');
$('#images_list').html("<%=j render 'entry/display_images' %>");

这是因为如果我理解正确，你只能在图像返回时找到js.erb文件。否则，我宁愿在js.erb文件中完成所有对象特定的DOM操作。

CSS：

.hidden {
  display: none;
}

JSFIDDLE：http://jsfiddle.net/b3rgstrom/wr2jz/1/

使用Fog删除远程文件并等待控制器respond_to时，Rails 4进度条

1 个答案: