DynamicModelChoiceField in formsets

[pierregm]

Hello,
I’m trying to use some DynamicModelChoiceFields in a formset on a custom page.
My base form is something like

class PoPForm(NetBoxModelForm):
    region = DynamicModelChoiceField(
        queryset=Region.objects.all(),
        required=False
    )
    site = DynamicModelChoiceField(
        queryset=Site.objects.all(),
        query_params={'region':'$region'}
    ) 

I initialise the formest in my view with 


    …
    formset = formset_factory(PopForm)
    …


My template looks like that:



<div id='container'>
  {{ formset.management_form }}

  {% with form=formset.empty_form %}
  <div id='empty_form'>
    {% render_field form.region %}
    {% render_field [form.site](http://form.site/) %}
  </div>
  {% endwith %}
  
{% for form in formset %}
   
    {% for field in form.hidden_fields %}
        {{ field }}
    {% endfor %}
    
    <div id='pop-{{ forloop.counter0 }}'>
        {% render_field form.region %}
        {% render_field [form.site](http://form.site/) %}
    </div>	
  
{% endfor %}
</div>



So far so good: I got two sets of selects, the selects were functional (ie, the dropdowns display my regions and sites).

However, there was no filtering: if I set a region, the corresponding site dropdown was not filtered.


I added a bit of javascript to rename the data-dynamic-params attribute of the site dropdown for each pop-xxx div from [{‘fieldName’:’region’,’queryParam:’region_id’}] to [{‘fieldName’: ‘form-xxx-region’, ‘queryParam’:’region_id’}] (where xxx is the index of the formset, ie the formloop.counter0).
The filtering worked correctly afterwards.


I also added a bit of code to add a new formset when I press a button, by cloning the empty_form:

function handleAddClick(event) {
  const totalForms = document.getElementById('id_form-TOTAL_FORMS');
  const form_idx = totalForms.getAttribute('value');
  const emptyForm = document.getElementById('empty_form');
  var element = document.createElement('div')
  element.insertAdjacentHTML('beforeend',
    emptyForm.innerHTML.replace(/__prefix__/g, form_idx)
  )
 document.getElementById(‘container’).insertAdjacentElement(‘beforeend’, element)
}

The fields of the new formset are correctly created, but the dropdowns are not functional (ie, they don’t open on a click).

I’m obviously missing something here, but what? I probably should transform my cloned element as a ‘real’ APISelect so that it gets the required event listeners, but how do I get the APISelect in my javascript block ?

[omkarsindha]

Did you solve it? I am trying to do the same thing