使用jQuery更新rails中的进度条

Question

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

我正在执行一个异步任务（sidekiq），它的进度可通过模型 (percentage_complete) 中的一个方法获得，该方法从 Redis 中检索其进度。

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

show.html.erb 文件上的进度条是这样显示的：

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

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

编辑

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

通过阅读我的问题，我似乎什么都没尝试，只是希望有人为我编写代码。让我添加一些 cmets：

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

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

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>