Changes between Initial Version and Version 1 of AJAXForeignKey

Timestamp:

May 20, 2007, 3:43:09 PM (18 years ago)

Author:

Michael Axiak <axiak@…>

Comment:

Created the page

AJAXForeignKey

@@ +1 @@
+= !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 ==
+=== Overview ===
+Using [http://developer.yahoo.com/yui/ YUI], create a new field similar to {{{models.ForeignKey}}} that renders differently in the admin.
+
+== Installation ==
+
+Here's how it's setup:
+
+1. Create a new folder in your project called {{{ajaxfkey }}}
+
+2. Create three files in that directory:
+
+  * {{{__init__.py}}} -- duh
+  * {{{fields.py}}} -- contains the actual model field. (download)
+  * {{{forms.py}}}  -- contains the form field. (download)
+3. Create a {{{base_site.html}}} file in your {{{base_templates/admin}}} directory.
+
+4. Modify your models to use it correctly.
+
+=== {{{ base_templates/admin/base_site.html }}} ===
+
+{{{
+{% 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 [http://www.json.org/json.js json.js]