Changes between Version 5 and Version 6 of AJAXWidgetComboBox


Ignore:
Timestamp:
Aug 30, 2006, 11:14:21 PM (18 years ago)
Author:
mattimustang@…
Comment:

updated to latest widget code

Legend:

Unmodified
Added
Removed
Modified

  • AJAXWidgetComboBox

    v5 v6  
    1 = An AJAX !ComboBox Widget for Django =
     1= An AJAX !Select Widget for Django =
    22
    3 This widget was written to replace the standard {{{<select>}}} form element Django uses for releated objects in forms. The widget is an extended version of the [http://dojotoolkit.org Dojo] !ComboBox widget. I use this mostly in places where the number of objects in the related objects table exceeds 20 or more. The widget is extracted from a project where some tables have more than 30,000 objects and using a {{{<select>}}} dropdown simply did not scale.
     3This widget was written to replace the standard {{{<select>}}} form element Django uses for releated objects in forms. The widget is an extended version of the [http://dojotoolkit.org Dojo] !Select widget. I use this mostly in places where the number of objects in the related objects table exceeds 20 or more. The widget is extracted from a project where some tables have more than 30,000 objects and using a {{{<select>}}} dropdown simply did not scale.
    44       
    55This widget supports live lookup of related fields based on a single field in that model and autocompletion.
    … …  
    1919== Requirements ==
    2020
    21 * [http://cheeseshop.python.org/pypi/simplejson simplejson 1.3] - used for object serialization.
    22 
    23 * [http://dojotoolkit.org Dojo] - used for AJAX and widget implementation. I have been using the latest SVN trunk in my project but version 0.2.2 may work for you.
     21* [http://dojotoolkit.org Dojo 0.3.1] - used for AJAX and widget implementation.
    2422
    2523* The widget tarball attached to this page.
    … …  
    2826== Installation ==
    2927
    30 * Install simplejson and make sure it is somewhere in your PYTHONPATH.
    31 
    3228* Install Dojo in media/js.
    3329
    34 * Untar nongcombobox-0.9.tar.gz and copy the {{{nong}}} directory into the same directory as dojo and copy the contents of {{{views.py}}} into one of your own {{{views.py}}} files.
     30* Untar nongselect-1.0.tar.gz and copy the {{{nong}}} directory into the same parent directory as dojo and copy the contents of {{{views.py}}} into one of your own {{{views.py}}} files.
    3531
    3632My project layout is as follows:
    … …  
    5450== Example Use ==
    5551
    56 In this example we will create a form that uses the !ComboBox widget to for the Article's reporter field in below.
     52In this example we will create a form that uses the !Select widget to for the Article's reporter field in below.
    5753 
    5854=== Model ===
    … …  
    10096}}}
    10197
    102 Now test your new reporter_lookup view my going to {{{http://localhost:8000/myapp/reporter_lookup/?search=}}}, which should return something like:
     98Now test your new reporter_lookup view my going to {{{http://localhost:8000/myapp/reporter_lookup/?q=}}}, which should return something like:
    10399{{{
    104100[["Reporter 1", 1], ["Reporter 2", 2], ...]
    … …  
    111107{{{
    112108...
     109{% load formtags %}
    113110{% block extrahead %}
    114111{% comment %}
    115 load dojo and the combobox widget
     112load dojo and the select widget
    116113{% endcomment %}
    117114<script type="text/javascript" src="/media/js/dojo/dojo.js"></script>
    … …  
    120117    dojo.setModulePrefix("nong.widget","../nong/widget");
    121118    dojo.widget.manager.registerWidgetPackage("nong.widget");
    122     dojo.require("nong.widget.NongComboBox");
     119    dojo.require("nong.widget.NongSelect");
    123120</script>
    124 
    125 {% comment %}
    126 Add the following if you use the same template for both adding and changing. This block pre-populates the new combobox widget with the current value of the article's reporter.
    127 {% endcomment %}
    128 {% if object %}
    129 <script type="text/javascript">
    130     function fillComboBoxes() {
    131         var reporter = dojo.widget.byId("{{ form.reporter.get_id }}");
    132         reporter.setValue("{{ object.reporter.name }}");
    133         reporter.setSelectedValue("{{ object.reporter.id }}");
    134     };
    135     dojo.addOnLoad(fillComboBoxes);
    136 </script>
    137 {% endif %}
    138 
    139121{% endblock %}
    140122...
    141123{% comment %}
     124Two templatetags are included for your convenience. The first, {% fieldrow ... %} splits out a form element similar in style to the
     125Django Admin with the field's help_text displayed.
     126The second, {% selectrow ... %}, splits out all the markup and javascript necessary for the AJAX selet widget.
     127
    142128Replace the usual {{ form.reporter }} element in the template with this:
    143129{% endcomment %}
    144 <select dojoType="NongComboBox" id="{{ form.reporter.get_id }}" name="reporter" dataUrl="/myapp/reporter_lookup/?search=%{searchString}" mode="remote" value="default"></select>
     130{% fieldrow form.headline %}
     131{% fieldrow form.pub_date %}
     132{% selectrow form.reporter "/myapp/reporter_lookup/?q=%{searchString}" "first_name" %}
    145133...
    146134}}}
    … …  
    148136That's it! You should be able to submit this form just like you normally would.
    149137
     138
     139Matthew Flanagan (mattimustang A T gmail.com)
Back to Top