Version 1 (modified by Michael Axiak <axiak@…>, 14 years ago) (diff)

Created the page

AjaxForeignKey Field

The Problem

In the Admin, I would like to have an autocompletion field for ForeignKey references. I know raw-id-admin works, but AJAX is just so much cooler.

The Solution


Using YUI, create a new field similar to models.ForeignKey that renders differently in the admin.


Here's how it's setup:

  1. Create a new folder in your project called ajaxfkey
  1. Create three files in that directory:
  • -- duh
  • -- contains the actual model field. (download)
  • -- contains the form field. (download)
  1. Create a base_site.html file in your base_templates/admin directory.
  1. Modify your models to use it correctly.


{% extends "admin/base.html" %}
{% load i18n %}

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="/media/scripts/yui/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/media/scripts/yui/dom/dom-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="/media/scripts/json.js"></script>
{% endblock %}

{% block title %}{{ title|escape }} | {% trans 'Django site admin' %}{% endblock %}

{% block branding %}
<h1 id="site-name">{% trans 'Django administration' %}</h1>
{% endblock %}

{% block nav-global %}{% endblock %}

Notice how YUI is in "/media/scripts/yui" and I downloaded json.js

Attachments (4)

Download all attachments as: .zip

Back to Top