Login

Tag "javascript"

Snippet List

Dynamically add inlines

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"]

  • javascript
  • admin
  • jquery
  • inline
  • tabular
  • stacked
Read More

Collapsed stacked inlines

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)

  • javascript
  • admin
  • jquery
  • inline
  • collapse
  • stacked
Read More

Dynamic tabular inlines with optional drag-n-drop sorting

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
  • dynamic
  • admin
  • sort
  • jquery
  • ordering
  • inlines
  • inline
  • tabular
  • sortable
Read More

Email obfuscation filter using ROT13

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 }}

  • filter
  • javascript
  • email
  • textmate
  • obfuscation
  • rot13
Read More

generateChart() for creating a Google Chart API pie chart from JavaScript

I ended up not needing this (there's a good reason it's in JS and not Python, but most people would probably want to do this server-side instead) but I'm stashing it here in case I need it later. It uses jQuery for the .each() method - which is very easy to replace if you need it to work without that dependency. Usage: var src = generateChart({ "foo": 5, "bar": 3, "baz": 6 });

  • javascript
  • googlechartapi
  • piechart
  • graphs
Read More

head inclusion middleware

Inspired by [http://www.djangosnippets.org/snippets/712/](YUI Loader as Django middleware) This loads in css and javascript files where you want them (usually in the head) - but allows you to put them anywhere in your code - i.e. in a TemplateTag. so your head code will look like this: ` <head> ... <!-- HEAD_init --> ... </head> ` then somewhere in your templates you can load in javascript or css files like so: ` <!-- HEAD_include myfile.js myotherfile.css --> ` It automatically checks if you've already included the files, and only puts them in once. It automatically figures out if its a javascript or css file by the file name - If you have an irregular filename (i.e. a google maps api script url) you can force it by using either of the following tags: ` <!-- HEAD_include_js [my javascript file] --> <!-- HEAD_include_css [my css file] --> ` Or you can write inline code to get rendered in the head: ` <!-- HEAD_render <script> someJavascriptCall(); </script> --> ` Todo: make it compress the js into one file...

  • middleware
  • javascript
  • css
Read More

Admin Input Field Character Count via jQuery

Use this code in *change_form.html* in your projects admin templates to add a character counter beside the input field(s) in admin to let users know how many characters they have remaining for a particular input field. The total number of characters allowed is determined by the max_length in your model for the models.CharField you're using this with. This code is designed to add the counter after the input field, but could easily be customized to fit the style of any admin. If the number of characters remaining is 10 or less the background color changes to yellow to visually warn the user. **Usage Examples:** In this example only the input field with id=id_pull_quote will receive the counter: $(document).ready(function() { $("#id_pull_quote").counter(); }); You could also apply the counter to all input fields on a page: $(document).ready(function() { $("form input[@maxlength]").counter(); }); **Note:** *You have to download jQuery to your project and place the appropriate call in order for this to work. The best place to do this is in the extrahead block. I left my call in as an example but your path and file name will probably vary.* Credit for base jQuery code goes to Brad Landis at [bradlis7.com](http://www.bradlis7.com).

  • template
  • javascript
  • admin
  • jquery
  • form
  • input
Read More

Integrate Wymeditor with filebrowser plugin

In order to integrate Wymeditor with the Django filebrowser, put the code in a file, set the fb_url variable to point to your filebrowser instance and add the file to your Javascript headers: <script type="text/javascript" src="/media/wymeditor/plugins/jquery.wymeditor.filebrowser.js"></script> or in your admin.py: class Media: js = ('/media/wymeditor/plugins/jquery.wymeditor.filebrowser.js',) Add the postInitDialog parameter to the Wymeditor initialization: $('textarea').wymeditor({ postInitDialog: wymeditor_filebrowser }); If you already have a postInitDialog function, you need to put a call to wymeditor_filebrowser inside that function. Then you should be able to click on the Filebrowser link to select an image.

  • javascript
  • images
  • wymeditor
  • filebrowser
Read More

ajax_validator generic view

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.

  • ajax
  • javascript
  • view
  • generic
  • jquery
  • validation
  • form
Read More

Admin Hack: Quick lookup of GenericForeignKey id by ContentType

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

  • javascript
  • admin
  • jquery
  • genericforeignkey
  • lookup
  • contenttype
  • object_id
  • raw_id
  • popup
Read More

Making prepopulate_from work with ForeignKeys and other sorts of choice fields

This is a fairly small bit template that, if placed in your_project_dir/templates/admin/prepopulated_fields_js.html will override the template that is normally pulled by the preopulated fields templatetag in the admin. The result is that you can successfully specify a ForeignKey or other field involving choices as a source for prepopulate_from in your admin.py. It works just as well when there are multiple fields of both the text and choice variety.

  • javascript
  • admin
  • prepopulate
Read More

Minify JS template tag

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 %}`

  • template
  • tag
  • javascript
  • js
  • minify
Read More

FilteredSelect

Displays as an ordinary selectbox with an additional text-input for filtering the options. An adaption of the example at [1] for use with Django. The code assumes the java script from [2] is downloaded into your media folder. Remember to output your form's media, for instance like: "{{form.media|safe}}", somewhere above your form. **License:** [2] by Mr Patrick Fitzgerald is licensed under GPL and the python code written by myself is GPL as well. **References:** 1. http://www.barelyfitz.com/projects/filterlist/index.php/ 2. http://www.barelyfitz.com/projects/filterlist/filterlist.js

  • javascript
  • widget
Read More

Custom color field with Javascript color picker

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.

  • newforms
  • javascript
  • models
  • admin
Read More

45 snippets posted so far.