Django admin add form ajax call

Question

So I've had success with Django/Ajax/Jquery before but I was wondering if I can do it within the admin console. When the user goes to the "Add New" form, I want them to fill out the ZIP code and based on that zip code, filter the available choices in the next field based upon the values I have in the database that correspond to that ZIP code.

I'm trying to look for the admin view that handles the POST for that form but I'm relatively new to django and am having troubles locating it. Maybe I'm overthinking this and there is an easier solution?

Answer 1

1. Create a view that, given a zipcode, responds with a json list of available choices (python)
2. Override the admin template for the model that has the zip code field (templates)
3. Add a listener to the zipcode's keyup or change event, that queries the view and uses the response to filter the next field (javascript)

Answer 2

urls.py

from django.conf.urls import url

app_name = 'your_app'
urlpatterns = [
    url(r'^query/page/(?P<otherModelSlug>[a-zA-Z0-9]+)/?', PageYouQueryFrom.as_view(), name='query_page'),
    …
    # yourWebsite.com/your_app/util/kittens
    url(r'^util/(?P<fieldValue>[a-zA-Z0-9]+)/?', GetDataUtilitly.as_view(), name='get_data_util'),
]

data_template.html

{{result_html}}

page_you_want_to_ajax.html

{% extends "base.html" %}

{% block script-inline %}  
  $(document).ready( function () {
    $("#place_to_query").change(function() {
      var queryURL = "/your_app/util/" + $(this).val();
      queryBox = $(this)
      $.get({
        url: queryURL,
        contentType: "application/x-www-form-urlencoded",
      })
        .done(function( data ) {
          html = $( data ).text()
          queryBox.parent().after(html)
        });
    });
  });
{% endblock script-inline %}

{% block content %}
  {{ otherModel }} <!-- or it could be a specific  field -->
  <input id="place_to_query"></input>
  <!-- The ajax will go here afterwards-->
{% endblock content %}

Main View - PageYouQueryFrom.py

# this is a Class Based View, but you can use a function based one too
class PageYouQueryFrom(TemplateView):
    template_name = 'path/to/page_you_want_to_ajax.html'

    def get_context_data(self, **kwargs):
        context_data = super(PageYouQueryFrom, self).get_context_data(**kwargs)
        context_data['otherModel'] = get_object_or_404(OtherModel, slug=self.kwargs['otherModelSlug'])
        return context_data

Data Query View - GetDataUtilitly.py

from django.views.generic import TemplateView
import requests
from pyquery import PyQuery

# this is a Class Based View, but you can use a function based one too
class GetDataUtilitly(TemplateView):
    template_name = 'path/to/data_template.html'
    def get_context_data(self, **kwargs):
        field_value = self.kwargs['fieldValue']
            page = requests.get('https://www.page.com?searchField=' + field_value)
            pq = PyQuery(page.content)
            # Get the (html) portion of what you want
            result_html = pq('div.c-table__row').html()
            return {'result_html': result_html}