如何使用离线Plotly和Pyramid更新绘图而无需重新加载网页？

Question

我正在尝试根据网页上的某些用户选择重新加载离线Plotly图表。我正在使用Pyramid来生成网页。捕获用户输入后，我使用以下jQuery为div生成内容：

$.getJSON("{{ request.route_url('park_list') }}" + "feature_plot/feature_ids=" + ids_string, function(data) {
    document.getElementById("plotly").innerHTML = data.result;
});

getJSON的第一个参数基于Jinja2模板，其中检索了一个url。那里的输出是一个带有＆＃34;结果＆＃34;的json字典。键/值对。该值是div内容，即Plotly图。然后，我尝试插入一个名为＆＃34; plotly＆＃34;。

的div容器

问题是没有插入任何内容。我看到一个宽度为0的空块，如果我尝试修复宽度，这是成功的，但仍然没有可见的内容。

我的问题是：在不重新加载页面的情况下，动态更新离线Plotly的正确方法是什么？

Answer 1

使用Firefox Web开发者控制台＆gt;网络选项卡，用于检查生成的HTTP响应负载。很可能它不是JSON，或者它不包含result属性，导致getJSON失败。

对于贫民窟调试，你也可以这样做：

console.log(data);

...在尝试插入HTML之前。

此外，如果您的目标只是通过AJAX调用替换页面上的HTML元素，在服务器端呈现生成的HTML，您可以执行以下操作：

$.get(url, function(html) {
    $("#myelem").replace(html);
});