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更新进度条中的宽度，我不需要实时刷新，我只想在加载此页面时，进度条的宽度可以使用我的数据库数据：beacon.power要显示

我的网站是

IP /信标

我的控制员：

  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 + '%')
    }
    });
});

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

1 个答案: