Cascading dropdown boxes

[bkampsnl]

Hi,

I'm writing a plugin that should use cascading dropdown lists (dependend on each other). I have noticed that this is not something that is default supported by Netbox.

I see that for example that the relation between dropdownboxes (for examples site and location) are not really enforced in the UI but instead the selected values are checked at the backend.

For example : I select a site and then a location of that site (of a device). Then I select another site but the location of the previous selected site is still selected in the location dropdown. So I guess dropdown I want the dropdown boxes to be cleared that are related on the dropdown box that was just changed.

I noticed that there is no jquery in Netbox so I guess I have to use plain old javascript. I hope there is a better way or the following steps (that I have followed until now) are the best option I have :

1. Create two foreignkey relationships with my plugin entity that are related to each other.
2. Create a new .html that will add the javascript to act on an onchange of a dropdown box :

{% extends 'generic/object_edit.html' %}
{% load render_table from django_tables2 %}
{% load plugins %}
{% load helpers %}
{% block javascript %}
<script>
    document.addEventListener("DOMContentLoaded", function() {

    var deviceDropdown = document.getElementById('id_device');
    var platformDropdown = document.getElementById('id_platform');


    deviceDropdown.addEventListener('change', function() {
        console.log("device called");
    });

    platformDropdown.addEventListener('change', function() {
        console.log("platform called");
    });    
});
</script>
{% endblock javascript %}

Change the view to load the new html file :

class SnapshotEditView(generic.ObjectEditView):
    queryset = models.Snapshot.objects.all()
    form = forms.SnapshotForm
    template_name = 'snapshot/snapshot_edit.html'

Change the form so the children dropdown boxes have no selected values :

class SnapshotForm(NetBoxModelForm):

    class Meta:
        model = Snapshot
        fields = ('platform','device', 'snapshot_content','comments')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['device'].queryset = Device.objects.none()

Now at this point I have to a view that will return the devices that are for that platform. And also load the devices using ajax / plain old javascript...

I wonder: is there an easier way ?

[stiltzkin10]

Any traction on this?