title: Django dependent dropdown with Ajax problems with ids
body: <p>I am trying to implement a dependent dropdown. Vitor Freitas did this in his blog and I am basically following his <a href="https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html" rel="nofollow noreferrer">solution</a>. 
  (A really cool blog with clear code which helped me a lot of times).</p>
  
  <p>I have adopted it to my pages but it stuck exactly where the dropdown should be restricted. I am pretty sure that I messed up with the foreign key or with Ajax/javascript (as I have no clue about ajax+javascript.) </p>
  
  <p>Maybe you see my 'basic' error and can help me. Would be thankful.</p>
  
  <p><strong>models.py</strong></p>
  
  <pre><code>class Country(models.Model):
      name = models.CharField(max_length=3)
      def __str__(self):
          return self.name
  
  class Provider(models.Model):
      country = models.ForeignKey(Country, on_delete=models.CASCADE)
      name = models.CharField(max_length=30)
  
      def __str__(self):
          return self.name
  
  class CustomerSubsidiary(models.Model):
      subCountry = models.ForeignKey(Country, on_delete=models.SET_NULL, null=True)
      subName = models.CharField(max_length=50, blank=True)
  </code></pre>
  
  <p><strong>urls.py</strong></p>
  
  <pre><code>urlpatterns = [
      path('test', views.CustomerSubsidiaryListView.as_view(), name='CustomerSubsidiary_changelist'),
      path('test/add/', views.CustomerSubsidiaryCreateView.as_view(), name='CustomerSubsidiary_add'),
      path('test/&lt;int:pk&gt;/', views.CustomerSubsidiaryUpdateView.as_view(), name='CustomerSubsidiary_change'),
      path('ajax/load-provider/', views.load_provider, name='ajax_load_provider'),
  ]
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>def load_provider(request):
      country_id = request.GET.get('country')
      provider = Provider.objects.filter(country_id=country_id).order_by('name')
      return render(request, 'Customer/city_dropdown_list_options.html', {'provider': provider})
  </code></pre>
  
  <p><strong>providerForm</strong></p>
  
  <pre><code>class ProviderForm(forms.ModelForm):
      class Meta:
          model = CustomerSubsidiary
          fields = ('subName', 'subCountry', 'provider')
  
      def __init__(self, *args, **kwargs):
          super().__init__(*args, **kwargs)
          self.fields['provider'].queryset = Provider.objects.none()
  </code></pre>
  
  <p><strong>customersubsidiary_form.html</strong></p>
  
  <pre><code>{% extends 'base.html' %}
  
  {% block content %}
  
    &lt;h2&gt;Provider Form&lt;/h2&gt;
  
    &lt;form method="post" id="providerForm" data-provider-url="{% url 'ajax_load_provider' %}" novalidate&gt;
      {% csrf_token %}
      &lt;table&gt;
        {{ form.as_table }}
      &lt;/table&gt;
      &lt;button type="submit"&gt;Save&lt;/button&gt;
      &lt;a href="{% url 'CustomerSubsidiary_changelist' %}"&gt;Nevermind&lt;/a&gt;
    &lt;/form&gt;
  
  
  
  
    &lt;script&gt;
      $("#id_country").change(function () {
        var url = $("#providerForm").attr("data-provider-url");  
        var countryId = $(this).val();  
  
        $.ajax({                       
          url: url,                    
          data: {
            'country': countryId       
          },
          success: function (data) { 
            $("#id_provider").html(data);  
          }
        });
  
      });
    &lt;/script&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>The jquery is loaded in the base.html.</p>
  
  <p><strong>city_dropdown_list_options.html</strong></p>
  
  <pre><code>&lt;option value=""&gt;-------&lt;/option&gt;
  {% for providers in provider %}
  &lt;option value="{{ providers.pk }}"&gt;{{ providers.name }}&lt;/option&gt;
  {% endfor %}
  </code></pre>