Code

Changes between Version 5 and Version 6 of AJAXWidgetComboBox


Ignore:
Timestamp:
08/30/06 21:14:21 (8 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)