时间戳

首页 > 解决方案 > Jupyter Notebook 扩展 - 加载 HTML

jquery - Jupyter Notebook 扩展 - 加载 HTML

问题描述

我写了一个 jupyter notebook 扩展。它将一个项目添加到内核菜单，单击该项目时，会启动一个包含表单的模式对话框。

该表单目前完全在 javascript 中定义。例如，document.createElement("form") 等。我怎样才能在 HTML 文件中定义它并将该 HTML 导入到 javascript 代码中？我试图像这样使用jquery的加载方法：

var form = document.createElement("form");
form.id = "form";
$( "#form" ).load("form.html");

其中 form.html 与 javascript 代码位于同一目录中。然而，什么也没有发生。控制台中没有记录错误。此行为与未找到 HTML 文件一致。我相信 _jupyter_nbextension_paths 不会将 HTML 文件与 javascript 文件一起复制。因此，什么都没有加载。

我查看了现有的 jupyter notebook 扩展，并没有找到有人将 html 导入他们的 javascript 代码的示例。

标签： jqueryjupyter-notebookjupyter

解决方案

我的最终解决方案包括将变量 FORM_HTML 中的 html 传递给 jquery，然后通过 jupyter 的对话框库以模式显示。它看起来像这样

define([
  "base/js/dialog"
], function(dialog){
dialog.modal({
      title: "title",
      body: $(FORM_HTML),
      open: onModalOpen,
      buttons: {
        Exit: {id: EXIT_BUTTON_ID},
      }
    });
})

推荐阅读