Ссылаться на 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

Вернуться на верх