Ссылаться на HTML-тег с javascript, который был сгенерирован из схемы django json
Я пытаюсь сослаться на HTML тег, который генерируется django's django_jsonforms
link JSON Schema link через javascript для динамического обновления формы. Например, 2 выпадающих списка в форме, если вы сделаете выбор в первом выпадающем списке, второй выпадающий список должен обновиться. Я уже делал это для HTML тегов выбора, которые я набирал вручную, но я пытаюсь заставить это работать для HTML, сгенерированного JSON схемами. Вот что я пробовал:
- просмотрите HTML-страницу и попытайтесь вызвать тег по имени с помощью
var project_selection = document.getElementsByClassName("form[project]")[0];
это не сработало, что меня немного удивило, поскольку при осмотре страницы я вижу, что тег select
имеет name="form[project]"
потом я подумал, что возможно JSON Schema отображает тег после запуска javascript, поэтому я попробовал добавить
defer
в<script defer>
и это не сработалоя пробовал использовать JSON Schema
.$id
#anchor
и$ref
но ничего из этого не сработало для ссылки на тег по ID
Я уверен, что кто-то уже сталкивался с этим, поэтому надеюсь, что ответ будет простым.
В конце концов, я знаю, что мне нужно использовать следующее со схемой JSON, чтобы сделать что-то подобное onchange
, как показано в link
var element = document.getElementById('editor_holder');
var editor = new JSONEditor(element, options);
editor.on('change',function() {
// Do something
});
заранее спасибо за просмотр!
ссылки:
Не совсем уверен в этом, но вы используете
getElementsByClassName
, который относится к имени класса элемента. А не к имени. Например:
<div class="cname"></div>
Это имя класса, элементы формы имеют атрибут name
, который можно запросить через
var project_selection = document.getElementsByName("form[project]");
Наконец-то выяснили причину проблемы. DOM не закончил рендеринг JSON Schema Form до того, как был выполнен скрипт для вызова
var project_selection = document.getElementsByName("form[project]");
поэтому обертывание вышеприведенного скрипта в функцию jquery ready устранило проблему.
<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