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

Question

我在这里看到了很多进度栏问题，但是它们都无法帮助我解决问题。 基本上，我在Rails 4中有一个视图和一个控制器，用户可以在其中删除与记录关联的图像，然后在删除图像后通过jquery更新图像div。

但是，删除操作是通过Fog远程完成到Google存储的，这需要花费几秒钟的时间。 我只想显示进度条或微调框，或在删除图像时以及刷新图像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和甚至引导程序（因为我知道它在某处有进度条，并且我们已经在项目中使用了引导程序）。

编辑：我还应该提到，进度条/微调器应该位于视图中心的模式窗口中，以确保即使页面已滚动，用户也可以看到它，因为该条目包含许多图像。

谢谢

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或一个真棒的微调器图标，然后在js响应文件中，当图像返回时将其删除。

您认为：

%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/