使用从 django json 模式生成的 javascript 引用 HTML 标记

Posted 2023-02-24

【中文标题】使用从 django json 模式生成的 javascript 引用 HTML 标记

【英文标题】：reference a HTML tag with javascript that was generated from django json schema

【发布时间】：2022-01-10 06:06:37

【问题描述】：

我正在尝试通过 javascript 引用由 django 的 django_jsonforms link JSON Schema link 生成的 html 标记以动态更新表单。例如，表单中有 2 个下拉列表，如果您在第一个下拉列表中进行选择，则第二个下拉列表应该更新。我已经为手动输入的 HTML 选择标签完成了此操作，但我试图使其适用于 JSON Schemas 生成的 HTML。这是我尝试过的：

检查 HTML 页面并尝试按名称调用标签

var project_selection = document.getElementsByName("form[project]")[0];

这不起作用，我有点惊讶，因为当我检查页面时看到select 标签具有name="form[project]"

然后我想也许 JSON Schema 会在 javascript 运行后呈现标签，所以我尝试将 defer 添加到我的 <script defer> 中，但没有成功

我尝试使用 JSON Schema $id #anchor 和 $ref 但没有一个可以通过 ID 引用标签

当我尝试使用名称的虚拟标签时，我得到了一个 NodeList，我可以使用 project_section[0] 访问它，但是当我尝试对 django 的 json 模式生成的这个选择标签做同样的事情时，我得到了它的样子一个空列表，但标签在它下面（但是我无法访问它）。见下图。

带有名称的h1标签的虚拟测试

实际 django 生成的带有名称的选择标签（看起来是空的，但当我展开它时它不是，但是，我无法在其上索引 [0] 项）

我相信以前有人遇到过这个问题，所以我希望这是一个简单的答案。

归根结底，我知道我需要将以下内容与 JSON Schema 一起使用，以执行类似于 onchange 的操作，如 link 所示

var element = document.getElementById('editor_holder');

var editor = new JSONEditor(element, options);

editor.on('change',function() 
  // Do something
);

感谢您提前查看！

参考：

json schema json schema editor github json schema python json schema python for django

【问题讨论】：

阅读How to create a Minimal, Reproducible Example。

【参考方案1】：

不完全确定这一点，但您正在使用 getElementsByClassName，与元素的类名相关。不是名字。比如：

<div class="cname"></div>

这是一个类名，表单元素有一个name属性，你可以通过它查询 var project_selection = document.getElementsByName("form[project]");

【讨论】：

嘿，谢谢你的回复，是的，你是对的，这个选择标签有name=，但我试过 getElementsByName("form[project]") 也没有用:(

我在问题中添加了更多数字，如果有帮助，可以显示更多问题

【参考方案2】：

终于弄清楚是什么原因造成的。在脚本执行调用之前，DOM 没有完成 JSON Schema Form 的渲染

var project_selection = document.getElementsByName("form[project]");

因此将上述脚本包装在一个 jquery 就绪函数中解决了这个问题。

<script>
     $('document').ready(function()
          var project_selection = document.getElementsByName("form[project]");
          console.log(project_selection);
          console.log(project_selection[0]);
     );
</script>

查看更多信息：Javascript HTML collection showing as 0 length