javascript - 页面加载时进度条更新宽度？

Question

当我加载一个页面时，我想在表格字段中显示一个进度条，如下所示:

<% @beacons.each do |beacon| %>
...
    <td><div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="10"
      aria-valuemin="0" aria-valuemax="100" style="width:100%" ><%= beacon.power %>%</div></td>

但是我不能beacon.power来更新进度条的宽度，我不需要实时刷新，我只是想当我加载这个页面时，进度条的宽度可以使用我的db data: beacon.power 显示

我的网站是

IP/beacons

我的 Controller :

  def index
    @beacons = Beacon.all

    respond_to do |format|
      format.html { @beacons }
      format.json { @beacons }
    end
  end

我尝试使用 javascript:

$(document).ready(function() {
    $.get("beacons.json", function(data){
      $("#progressbar").css('width', data.power+'%')
    }
    });
});

它不起作用，我的设置有什么问题吗？

Answer 1

我不相信 jQuery 会自动解析从 $.get 方法返回的 JSON。我认为您可能需要手动执行此操作。像这样……

$(document).ready(function() {
    $.get("beacons.json", function(data){
      parsedData = $.parseJSON(data);
      $("#progressbar").css('width', parsedData.power + '%')
    }
    });
});