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"。我想在发生这种情况时停止更新。

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

我知道我应该使用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>

使用jQuery更新rails中的进度条

1 个答案: