3

I am trying to reference a HTML tag that is generated by a django's django_jsonforms link JSON Schema link via javascript to dynamically update the form. For example 2 dropdowns in a form, if you make a selection in the 1st dropdown the 2nd dropdown should update. I've done this for HTML selection tags that I manually typed out but I am trying to get this to work for HTML generated by JSON Schemas. Here is what I've tried:

  • inspect HTML page and try to call the tag by name with

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

this didn't work, which I was a little surprised by since I see when I inspect the page that the select tag has name="form[project]"

  • then I thought maybe the JSON Schema renders the tag after the javascript runs so I tried adding defer into my <script defer> and that didn't work

  • I tried using JSON Schema $id #anchor and $ref but none of those worked to reference the tag by ID

when I try a dummy tag with name I get a NodeList back that I can access with project_section[0], however when I try to do the same thing for this select tag generated by django's json schema i get what it looks like an empty list but the tag is under it (however I cannot access it). See the figures below.

dummy test for h1 tag with name enter image description here

actual django generated select tag with name (looks empty but it's not when I expand it, however, I cannot index [0] item on it) enter image description here

I am sure someone has come across this before so I hope this is an easy answer.

At the end of the day, I know I need to use the following with the JSON Schema to do a similar to onchange as shown in link

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

var editor = new JSONEditor(element, options);

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

thanks for taking a look in advance!

references:

Nicolas Régnier
  • 141
  • 5
PydPiper
  • 411
  • 5
  • 18
  • Read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). – aaron Dec 07 '21 at 13:02

2 Answers2

2

Not entirely sure on this one, but you are using getElementsByClassName, which is relevant to the class name of the element. Not the name. So for example:

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

That is a class name, form elements have a name attribute that you can query via var project_selection = document.getElementsByName("form[project]");

Joe Howard
  • 307
  • 5
  • 27
  • hey thanks for the reply yes you are correct this select tag has `name=` but i tried getElementsByName("form[project]") and that didnt work either :( – PydPiper Dec 04 '21 at 01:10
  • i added more figures to the question showing more of the issue if that helps – PydPiper Dec 04 '21 at 01:38
0

Finally figured out what was causing the issue. The DOM was not finished rendering the JSON Schema Form before the script was executing to call

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

therefore wrapping the above script in a jquery ready function fixed the issue.

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

see more at: Javascript HTML collection showing as 0 length

PydPiper
  • 411
  • 5
  • 18