Login

Tag "jquery"

Snippet List

Select Dropdown Widget with jQueryUI

This widget can be imported in your forms.py file and used like so: formfield = forms.ModelChoiceField(widget=SelectDropdownWidget, queryset=Model.objects.all()) The javascript is provided by [filament group's Scott and his jQueryUI Selectmenu](http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/). In addition to the javascript you will need [jQuery (the latest release is fine) and jQuery UI](http://jqueryui.com/). The convenient thing is that this widget will style to match whichever jQuery UI you've 'rolled' or selected, making it highly customizable! Hopefully this helps others who wanted a nice widget with jQuery and were sad to find there were no nice default options, enjoy! :)

  • dropdown
  • jquery
  • select
  • widget
  • jqueryui
Read More

Multiple Select Widget with jQueryUI

This widget can be imported in your forms.py file and used like so: formfield = forms.ModelMultipleChoiceField(widget=MultiSelectWidget, queryset=Model.objects.all()) The javascript is provided by [Michael's Multiselect](http://github.com/michael/multiselect/tree/next). In addition to the javascript you will need [jQuery (the latest release is fine) and jQuery UI](http://jqueryui.com/). The convenient thing is that this widget will style to match whichever jQuery UI you've 'rolled' or selected, making it highly customizable! Hopefully this helps others who wanted a nice widget with jQuery and were sad to find there were no nice default options, enjoy! :)

  • jquery
  • widget
  • multiple select
  • multiselect
  • jqueryui
Read More

Drag and drop ordering of admin list elements using jQuery UI

Adds drag-and-drop ordering of rows in the admin list view. The only requirements is that the model has a field holding the position and that the field is made list_editable in the ModelAdmin. The changes of the ordering are applied after clicking 'Save'. The included javascript uses [jQuery UI's sortable](http://jqueryui.com/demos/sortable/) plugin Inspired by snippets [#1053](http://djangosnippets.org/snippets/1053) and [#998](http://djangosnippets.org/snippets/998/). Another similar snippet using AJAX is [#2047](http://djangosnippets.org/snippets/2047/).

  • admin
  • sort
  • jquery
  • order
  • sortable
Read More

Ajax ordering models on the change list page of the admin using drag and drop with jQuery UI

Makes models orderable on the change list page of the admin using drag and drop with jQuery UI (via sortable()). So you can order your objects in more easy way. Inspired by snippets [#1053](http://djangosnippets.org/snippets/1053/) and [#998](http://djangosnippets.org/snippets/998/) First, ordering field to your model (default called 'order). You can specify other name for this field, but you should add 'order_field' attr to model (i.e order_field = 'your_new_order_field_name') Also, snippet adds 'order_link' field to admin's changelist and hides it by javascript.

  • ajax
  • admin
  • jquery
  • ordering
Read More

Django Admin inline preview

Extend this ModelAdmin to get dynamic inline previews in the list admin also lives here: [http://github.com/broderboy/django-admin-preview](http://github.com/broderboy/django-admin-preview)

  • admin
  • jquery
Read More

Drop in dynamic formsets in admin

A very plugable way to get Stanislaus jquery dynamic formset working in the admin with adding just one template. Add the following to templates/admin/APP/MODEL/change_form.html and also update the MODEL in the prefix setting. Thanks Stanislaus [http://elo80ka.wordpress.com/2009/10/10/jquery-plugin-django-dynamic-formset/](http://elo80ka.wordpress.com/2009/10/10/jquery-plugin-django-dynamic-formset/) [http://go2.wordpress.com/?id=725X1342&site=elo80ka.wordpress.com&url=http%3A%2F%2Fcode.google.com%2Fp%2Fdjango-dynamic-formset%2F](http://go2.wordpress.com/?id=725X1342&site=elo80ka.wordpress.com&url=http%3A%2F%2Fcode.google.com%2Fp%2Fdjango-dynamic-formset%2F) [http://www.djangosnippets.org/snippets/1389/](http://www.djangosnippets.org/snippets/1389/)

  • dynamic
  • admin
  • jquery
  • inlines
  • formsets
Read More

"Save and Continue" keyboard command for admin, with autoscroll

This snippet is helpful if you do a lot of editing on a single large admin form (for example, in a rich text field), and want to frequently save your progress. If you press control-S, or command-S on a Mac, the admin change form will save and reload, and the page will scroll back down to where you last were. This snippet relies on jquery, [jquery.cookie](http://plugins.jquery.com/project/cookie), and the [shortcut.js](http://www.openjs.com/scripts/events/keyboard_shortcuts/) keyboard library (which doesn't use jquery, but seemed more robust than the jquery keyboard plugins I saw). It uses a temporary cookie to remember where the page was scrolled to, to avoid having to override the admin behavior. Note: don't put this in templates/admin/change_form.html -- the circular import causes a Django crash. *Edit: Had forgotten to include jquery.cookie, which I was already including elsewhere.*

  • admin
  • jquery
  • save
Read More

Make hyperlinks for labels of raw_id_fields (jQuery)

The Django Admin site provides a "raw ID" feature for foreign keys that reference large tables. In the form view, the label of the referenced object will appear after the input. This snippet will make that label into a hyperlink that takes you to the form view for that object. To use this snippet, copy base_site.html into your templates/admin directory (if you haven't already), and paste this code into that file somewhere after the 'extends "admin/base.html"' directive. If you are already using jQuery, you can remove the first script tag. If you are already extending "extrahead", just paste the script tag(s) into the block you have created. [Documentation for raw_id_fields](http://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.raw_id_fields)

  • admin
  • jquery
  • raw_id_fields
Read More

Clear FileField/ImageField files in the Admin

The widget for FileField and ImageField has a problem: it doesn't supports clear its value and it doesn't delete the old file when you replace it for a new one. This is a solution for this. It is just for Admin, but you can make changes to be compatible with common forms. The jQuery code will put an **<input type="checkbox">** tag next to every **<input type="file">** and user can check it to clear the field value. When a user just replace the current file for a new one, the old file will be deleted.

  • admin
  • jquery
  • imagefield
  • filefield
Read More

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

jQuery slugify plugin

This plugin lets you make a field(ideally for a slug) populate itself based on the value of another field. You use it like this: jQuery('#id_title').slugify('#id_slug');

  • slug
  • jquery
  • slugify
Read More

54 snippets posted so far.