我目前有一个侧边栏ul
和li
下图中的元素。我在它的右侧有三个图表。每个图表都有自己的 REST Web 服务来更新其数据。当我单击侧栏项目时,我想更新这些图表。(通过 Ajax 调用)
对此的高级设计是什么?例如,我需要link_to
我的li
元素吗?里面放什么?如何传递参数?如何拨打电话?有什么宝石可以让生活更轻松?
一些高级甚至更低级别的设计受到赞赏,所以我知道从哪里开始。
我目前有一个侧边栏ul
和li
下图中的元素。我在它的右侧有三个图表。每个图表都有自己的 REST Web 服务来更新其数据。当我单击侧栏项目时,我想更新这些图表。(通过 Ajax 调用)
对此的高级设计是什么?例如,我需要link_to
我的li
元素吗?里面放什么?如何传递参数?如何拨打电话?有什么宝石可以让生活更轻松?
一些高级甚至更低级别的设计受到赞赏,所以我知道从哪里开始。
这更像是一个 AJAX 问题而不是 rails 问题。
您需要在li
's 上添加点击处理程序(jQuery 可能是最简单的方法)并让它们向图表的 REST 端点发送 AJAX 请求。根据您的设置,我建议让这些端点以 JSON 格式返回您正在寻找的数据,然后更新图表中的值(可能会发疯并使用 d3js 来绘制它们)。
我猜 REST 端点需要 aphysician_id
或什么东西才能返回正确的数据,你需要从某个地方得到它。我通常只是将 id 添加为元素的数据属性。
<li class="js-physician" data-id="<%= physician.id %>">Physician X</li>
我假设您正在迭代 @physicians 集合以获取列表。
然后为你的 js 做类似的事情
$(document).on('click', '.js-physician', function(e) {
var physician_id = e.target.getAttribute('data-id');
params = { // this is your AJAX object
type: 'GET',
url: '/some_rest_url?physician_id=' + physician_id,
success: function(data) {
// update the charts with the returned data
},
error: function(jqXHR, textStatus, errorThrown) {
// handle error
}
};
$.ajax(params);
});
所以你所要做的就是设置你的回调处理程序并确保你发送正确的数据。