如何使用离线情节和金字塔在不重新加载网页的情况下更新情节

Question

我正在尝试根据网页上的某些用户选择重新加载离线 Plotly 图表。我正在使用金字塔来生成网页。捕获用户输入后，我使用以下 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。那里的输出是一个带有"结果"键/值对的 json 字典。该值是div 内容，即 Plotly 图。然后，我尝试将其插入到名为"plotly"的div容器中。

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

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

Answer 1

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

对于贫民窟调试，您还可以执行以下操作：

console.log(data);

。在尝试插入 HTML 之前。

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

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