3

我是 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 中，我不确定该脚本是否应该加载到视图中，或者它是否应该是视图本身。

4

1 回答 1

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>
于 2013-04-12T14:05:10.643 回答