Login

Tag "jquery"

54 snippets

Snippet List

Django 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. **Works with** Django 3.1.4 (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/collapsed-stacked-inlines.js'] admin.site.register(Event, EventAdmin)

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

Orderable inlines using drag and drop with jQuery UI

An easy way of making inlines orderable using drag-and-drop, using [jQuery UI's](http://ui.jquery.com/) sortable() plugin. First, add an "order" field to the inline models which is an IntegerField, and set that model to use 'order' as its default order_by. Then hook in the JavaScript. This should make them drag-and-drop sortable using jQuery UI, and also hide the divs containing those order fields once the page has loaded. This technique is unobtrusive: if JavaScript is disabled, the order fields will be visible and the user will be able to manually set the order by entering numbers themselves.

  • jquery
  • inlines
  • pyconuk2008
Read More

jquery autocomplete widget

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

  • ajax
  • newforms
  • javascript
  • forms
  • jquery
  • widgets
Read More
Author: skam
  • 25
  • 145

DropDownMultiple widget

Observation: depends on jQuery to works! This widget works like other multiple select widgets, but it shows a drop down field for each choice user does, and aways let a blank choice at the end where the user can choose a new, etc. Example using it: class MyForm(forms.ModelForm): categories = forms.Field(widget=DropDownMultiple) def __init__(self, *args, **kwargs): self.base_fields['categories'].widget.choices = Category.objects.values_list('id', 'name') super(MyForm, self).__init__(*args, **kwargs)

  • newforms
  • multiple
  • forms
  • jquery
  • select
  • widget
Read More

jQuery color picker model field

This uses the Really Simple Color Picker in jQuery: http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/ Get source from there or GitHub: http://github.com/laktek/really-simple-color-picker/tree/master

  • models
  • admin
  • jquery
  • widgets
Read More

Dynamically adding forms to a formset. OOP version.

**What It Is** This is a JavaScript-based solution to dynamically add and remove forms in formsets and inlineformsets. It requires jQuery. Originally based on this Snippet: https://djangosnippets.org/snippets/1389/ I have done a lot of work to make it OO, and am using it in production on pages with multiple inlineformsets, and even nested inlineformsets (I call it, "Inlineformset Inception"). My hope is that the code and example are enough to show how it works. **Usage Details** In the example usage, I am using a CSS class, 'light', to make every other form have a light background color. My form placeholder is an element with an ID of 'formset-placeholder' (the default). And the form selector is a class name of 'dynamic-form' (the default). When I have time, I will create a GitHub repository with the code and completed examples.

  • django
  • javascript
  • jquery
  • formset
  • inlineformset
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

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

Drag and drop ordering of admin list elements for Grappelli

Adds drag-and-drop ordering of rows in the admin list view for [Grappelli](http://code.google.com/p/django-grappelli/). This is based on [Snippet #2057](http://djangosnippets.org/snippets/2057/) and fixes some bugs as well as switching to jQuery/jQuery UI provided by Grappelli. No additional files need to be installed. The model needs to have a field holding the position and that field has to be made list_editable in the ModelAdmin. The changes of the ordering are applied after clicking 'Save'.

  • admin
  • sort
  • jquery
  • order
  • sortable
  • grappelli
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

Dynamically adding forms to a formset with jQuery

I recently worked on an application, where I had to provide a way for users to search for objects based on user-defined properties attached to these objects. I decided to model the search form using a formset, and I thought it'd be a good idea to allow users dynamically add and remove search criteria. The script (dynamic-formset.js) should be re-usable as-is: 1. Include it in your template (don't forget to include jquery.js first!). 2. Apply the 'dynamic-form' class to the container for each form instance (in this example, the 'tr'). 3. Handle the 'click' event for your `add` and `delete` buttons. Call the `addForm` and `deleteForm` functions respectively, passing each function a reference to the button raising the event, and the formset prefix. That's about it. In your view, you can instantiate the formset, and access your forms as usual.

  • newforms
  • jquery
  • dynamic-formset
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

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