newforms widget for autocompleting text fields using jquery autocomplete plugin: http://jquery.bassistance.de/autocomplete/ to be implemented: - store the pk value into an hidden field - handling ChoiceFields and many others massimo dot scamarcia at gmail.com
This snippet is an example of an ajax progress bar (using jquery) that you might use in conjunction with <http://www.djangosnippets.org/snippets/678/>. 1. Generates a uuid and adds X-Progress-ID to the forms action url. 2. Adds the progress bar to the page. (you'll have to add some css styling for this) 3. Makes period ajax requests to update the progress bar.
This jQuery javascript enables dynamic add/delete of rows in tabular inlines. It adds a "+" icon at the bottom of the inline to allow addition of new rows, and replaces the default delete checkbox with a "x" icon for deletion, giving you the possibility to add/delete rows instantly without reloading the page. In addition, it gives you drag-n-drop ordering functionality with a named position model field using jQuery UI Sortable. **Usage (see below for example):** Just include the javascript on your admin page, together with jQuery, and it'll automatically affect all tabular inlines. Optionally, also include jQuery UI Sortable and an Integer field in your inline model named "position" (or whatever you set "position_field" to), which will automatically hide the position field and enable drag-n-drop sorting. **Developed for:** * jQuery 1.3.2 * jQuery UI 1.7.1 * Django trunk (tested in Django v1.0.2) * (Might work with other versions with or without adjustments, but not tested) **Settings (in top of javascript):** * "position_field" is the name of an integer model field that is used for ordering the inline model. If left empty or not found, the drag-n-drop functionality is dropped. Defaults to "position". * "add_link_html" for custom look of "add"-buttons. Defaults to Django's built-in "+" image icon. * "delete_link_html" for custom look of "delete"-buttons. Defaults to Django's built-in "x" image icon. **Use example: ** *admin.py:* class NameInline(admin.TabularInline): model = Name extra = 1 class PersonAdmin(admin.ModelAdmin): inlines = [NameInline] class Media: js = ['js/jquery-1.3.2.min.js', 'js/ui/ui.core.js', 'js/ui/ui.sortable.js', 'js/dynamic_inlines_with_sort.js',] css = { 'all' : ['css/dynamic_inlines_with_sort.css'], } admin.site.register(Person, PersonAdmin) *models.py:* class Person(models.Model): year_born = models.PositiveIntegerField(_('year born'), null=True, blank=True) class Name(models.Model): profile = models.ForeignKey(Profile, verbose_name=_('profile')) position = models.PositiveIntegerField(_('position'), default=0) name = models.CharField(_('name'), max_length=100) class Meta: ordering = ('position',) *dynamic_inlines_with_sort.css:* /* To make row height of saved items same as others */ .inline-group .tabular tr.has_original td { padding-top:0.5em; } .inline-group .tabular tr.has_original td.original p { display:none; } Please post bugs in comments.
**Javascript merging and compression templatetag** One of the most important things for improving web performance is to reduce the number of HTTP requests. This is a templatetag that merges several javascript files (compressing its code) into only one javascript. It checks if this merged file is up to date, comparing modification time with the other javascripts to merge. Usage: {% load jsmerge %} {% jsmerge mergedfile js/file1.js js/file2.js js/file3.js %} The previous code will: 1. Search in `settings.MEDIA_ROOT` for all files passed by parameter. 2. Create a `/path/to/media_root/mergedfile.js` (if it doesn't exist or it's not up to date). This file is a merging plus compression of all javascripts. 3. Return this HTML fragment: `<script type="text/javascript" src="/media_url/mergedfile.js"></script>`
These functions use JQuery to dynamically add new entries for stacked or tabular inlines on a change form. To enable it, change the parent model to include this Javascript as well as JQuery. Here's an example: class MeetingAdmin(admin.ModelAdmin): inlines = [MeetingDonationInline, MeetingExtraInline] class Media: js = ["/media/jquery-1.3.2.min.js", "/media/dynamic_inlines.js"]
An email address obfuscation template filter based on the ROT13 Encryption function in Textmate's HTML bundle. The filter should be applied to a string representing an email address. You can optionally pass the filter an argument that will be used as the email link text (otherwise it will simply use the email address itself). Example usage: {{ email_address|obfuscate:"Contact me!" }} or {{ email_address|obfuscate }} Of course, you can also use this on hardcoded email addresses, like this: {{ "[email protected]"|obfuscate }}
This snippet allows you to use YUI's autocomplete widget in a easy way. 1. Download YUI (http://developer.yahoo.com/yui/) library and put it into MEDIA folder (in my case I put YUI/build/ directory as base/yui/ in my MEDIA folder) 2. Create lookup view for your autocomplete field. See 'test_ajax_ac' function to see how this lookup view may be built. You have to define JsonResponse somewhere in your files. JsonResponse is taken from: http://www.djangosnippets.org/snippets/154/ 3. Define url for newly created view in urls.py (in usual way) 4. Include necessary .js and .css files in your page (see example in test_ajax.html) 5. Assign widget to a field - see form's __init__ at UserForm in the example. Additional (optional) parameters are: format_result_fname (name of javascript function for formatting results - see YUI docs for examples)), item_select_handler_fname (name of javascript function for handling item select event (see YUI docs)). When using YUI take care about proper skin - you'll possibly need to define wrapper like: `<div class="yui-skin-sam">....</div>` around your html code.
A simple jQuery javascript that collapses all stacked inline rows for better handling of large inline fieldsets. It also adds "Show"/"Hide"-buttons for showing/hiding each row, which could be customized and styled using css. **Usage (see below for example):** Include the javascript on your admin page, together with jQuery, and it'll automatically affect all stacked inlines. **Developed for:** * jQuery 1.3.2 * Django trunk (tested in Django v1.0.2) * (Might work with other versions with or without adjustments, but not tested) **Use example: ** *admin.py:* class DateInline(admin.StackedInline): model = Date extra = 10 class EventAdmin(admin.ModelAdmin): inlines = [DateInline] class Media: js = ['js/jquery-1.3.2.min.js', 'js/collapsed_stacked_inlines.js',] admin.site.register(Event, EventAdmin)
Sample jQuery javascript to use this view: $(function(){ $("#id_username, #id_password, #id_password2, #id_email").blur(function(){ var url = "/ajax/validate-registration-form/?field=" + this.name; var field = this.name; $.ajax({ url: url, data: $("#registration_form").serialize(), type: "post", dataType: "json", success: function (response){ if(response.valid) { $("#"+field+"_errors").html("Sounds good"); } else { $("#"+field+"_errors").html(response.errors); } } }); }); }); For each field you will have to put a div/span with id like fieldname_errors where the error message will be shown.
Generic Relations with django.contrib.contenttypes.generic.GenericForeignKey work well for models but the admin interface just shows the object id as an integer with no easy way to lookup the id of a new object. This jquery javascript adds a "Lookup <ContentType Name>" link next to the object id field in the admin interface. This is done by reusing the showRelatedObjectLookupPopup() function provided with django which is used when the field is included in raw_id_fields (a little magnifying glass linked to popup object selector shows up). This essentially works the same way but changes which model's objects are shown and selected in the popup based on the ContentType selected for object_type
A custom model field 'ColorField' which stores a hex color value like '#FFFFFF' and shows a Javascript color picker in the admin rather than a raw text field. It is written to work with the current trunk (i.e. after newforms-admin merge). You'll need the ColorPicker2.js file found at [www.mattkruse.com](http://www.mattkruse.com/javascript/colorpicker/combined_compact_source.html) (his license prohibits including the file here). This should be placed in the 'js' folder of your admin media. The snippet includes a python source file which can be placed wherever you wish, and a template which by default should be placed in a folder 'widget' somewhere on your template path. You can put it elsewhere, just update the path ColorWidget.render The custom field at present does not validate that the text is a valid hex color value, that'd be a nice addition.
**Attention: this snippet depends on jQuery library to works** The Admin templates hierarchy does not allow you change the submit line (that buttons bar in the footer of the change view of a model class). This code shows how to resolve this, using a simple javascript trick. You can read the code and implement using your favorite javascript library (instead of jQuery) or pure JavaScript. This example regards to User Profile, a common used model class that adds custom fields to a user in the authentication system. To use this, you must put this template code in a file with the following name: templates/admin/auth/user/change_form.html
Uses JSMin. Python version available from [http://www.crockford.com/javascript/jsmin.py.txt](http://www.crockford.com/javascript/jsmin.py.txt) Provides template tags to minify JavaScript on the fly. `{% minifyjs %}[code]{% endminifyjs %}`
This widget will render a chained select menu powered by JavaScript to make it easier to identify foreign keys. This widget includes danjak's form decorator (http://www.djangosnippets.org/snippets/59/), and Xin Yang's chained select javascript functions (http://www.yxscripts.com/). I developed this to be used with an IT inventory system. See screenshot here: http://bayimg.com/cAjAGAabN The models are laid out that location -> area -> room. But the __str__ of area and room did not include unique fields, so the built-in single select box that django uses for ForeignKey's did not work for me. A few notes: 1: I will not be maintaining this, I am only putting it out here in case it helps others. 2: The chained select menus will only be available to the first form on the page. Reason being: the template names the form, not the django backend. So, I had to reference the form in javascript as document.forms[0]. 3: Due to the javascript processing, the chain select menu will not show current values other than the default specified in the javascript. Thus, form_for_instance and a dict of values passed to form_for_model will not pre-set the chained select. 4: The rendered selects are put into a vertical table. No other layout is supported. 5: The select field names for upper-leveled options are "chain_to_[destination_field_name]__[current_selects_model_name]. 6: The select name for the destination option is the name that django sends internally, which is usually the field name. The value of each option in the select is the primary key associated with that object. 7: I tried to get this built in to the native form_for_model helper function for use with the default admin site, but failed miserably. How to get it working (quick version): 1: Define your models 2: From your view, import the form_decorator and ChainSelectWidget (I put them in CustomWidgets.py and made sure it was in the path). 3: Build arguments for the form_decorator eg: widget_overwrite=dict(field=ChainSelectWidget(order=[(top, 'order_field'), (next, 'order_field'), (field, 'order_field)] 4: Send arguments to form_decorator eg: callback = form_decorator(widgets=widget_overwrite) 5: Build modified form eg: mod_formclass = form_for_model(field, formfield_callback=callback) 6: Instance the modified form eg: instanced_form = mod_formclass() 7: Send instanced form to the templating engine 8: From the template, import the chainedselects function file (replace [] with <>) eg: [head][script language="javascript" src="path/to/chainedselects.js"][/script] 9: Display the form object as you normally would.
This snippet in the one to improve the method described in [http://djangosnippets.org/snippets/679/](http://djangosnippets.org/snippets/679/). It uses some jquery extensions to make the task more easier: **jquery.timers.js**, **jquery.progressbar.js**, **jquery.form.js**.