ruby-on-rails - 使用 jQuery 更新 Rails 中的进度条

Question

我是 JavaScript/jQuery 的新手，我相信这是一个非常简单的问题；但我无法实现它。

我正在执行一个异步任务(由 sidekiq )，并且可以通过模型 ( percentage_complete ) 中的方法获取其进度，该方法从 Redis 检索其进度。

我想在模型的 show 中显示进度条 View ，我希望它使用 AJAX 每 x 秒更新一次。

show.html.erb 上的进度条显示如下文件:

<div class="progress">
  <div class="bar" style="width: <%= @model.percentage_complete %>%;"></div>
</div>

如何设置 jQuery 脚本来异步更新此属性？

编辑

我还有一个:status设置的属性"done"当任务完成时。发生这种情况时我想停止更新。

通过阅读我的问题，我似乎没有尝试过任何事情，只是希望有人为我编写代码。让我添加一些评论:

• 我知道我应该使用 setInterval每“x”秒更新一次属性
• 我知道我应该使用 $('.progress .bar').width(<%= @model.percentage_complete %>%)设置新的百分比

但是，由于我不熟悉 jQuery 和 JavaScript，特别是 Rails，我不确定这个脚本是否应该加载到 View 中，或者它本身是否应该是一个 View 。

Answer 1

我通过创建一个操作来检索状态来解决这个问题

# GET /status/1.json
def status
  @batch = Batch.find(params[:id])

  respond_to do |format|
    format.json
  end
end

并使用以下 JavaScript:

<script type="text/javascript">
function progress(){
    var progress = setInterval(function() {
      var $bar = $('.bar');
      var $pct = $('#pct');
      $.get("<%= @batch.id %>/status.json", function(data){
        if (data.status == "done") {
          location.reload();
        } else {
          $bar.width(data.progress+"%");
          $pct.text(data.progress+"%");
        }
      });
    }, 800);
}

$(document).ready(function() {
  $.get("<%= @batch.id %>/status.json", function(data) {
    if (data.status == "processing") {
      progress();
    }
  });
});
</script>