頁面加載時進度條更新寬度？

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數據：beacon.power到desplay

我的網站是

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