Login

All snippets written in JavaScript

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)

Read More

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

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

Convert multiple select for m2m to multiple checkboxes in django admin form

This is a javascript to call in the Media class of the ModelAdmin instance for the model, requires some additional css. The goal of such approach is that the add related functionality is supported, and works also with the django-mptt model fields. The new component can support resize functionality, in such case the jquery-ui resizable script is needed. For a complete documentation on this, and how to use it inside your project please visit this [blog post](http://www.abidibo.net/blog/2013/04/10/convert-select-multiple-widget-checkboxes-django-admin-form/)

  • django-admin
  • multiplecheckboxfield
  • multiple-select
  • django-mptt
Read More

Django admin inline ordering - javascript only implementation

Having spent ages trying out various admin inline ordering packages and examples I found on here and elsewhere I failed to find a single one that did what I was after in the way I wanted or that worked, so I wrote one! The general idea for this version was to be done purely in javascript, no additional methods or parameters required on your models, it's designed to be stuck in a js file and included in your admin class Media js parameter: class Media: js = ['js/admin/widget_ordering.js', ] Your model should have an integer column for sorting on, the name of this column should go in the 'sort_column' parameter at line 3 and your model should also obviously specify this in it's Meta 'ordering' class: class Meta: ordering = ('rank',) That's it! This is a pretty basic implementation that adds simple up and down buttons next to the sort order field, if you want to adapt this to use drag and drop or something, please feel free!

  • admin
  • sorting
  • ordering
  • inline
  • tabular-inlines
Read More

Google v3 geocoding for Geodjango admin site

This only works with Point geometry. [video](http://www.youtube.com/watch?v=gZ7_n177sTE&list=HL1351725584&feature=mh_lolz) Rename the snippet as gmgdav3.js and save it to template/admin with [gmgdav3.html](http://djangosnippets.org/snippets/2840/) * - *models.py*: ` from django.contrib.gis.db import models` ` class point(models.Model):` ` address = models.CharField(max_length=100, help_text='Press "Tab" to refresh the map')` ` longitude = models.FloatField(help_text='WGS84 Decimal Degree. Press "Tab" to refresh the map')` ` latitude = models.FloatField(help_text='WGS84 Decimal Degree. Press "Tab" to refresh the map')` ` in_geom = models.PointField('shp', srid=4326)` ` objects = models.GeoManager()` ` def __unicode__(self):` ` return str(self.address)` * - *admin.py*: ` from models import * ` ` from django.conf import settings` ` from django.contrib.gis import admin` ` from django.contrib.gis.geos import GEOSGeometry` ` class GoogleAdmin(admin.OSMGeoAdmin):` ` g = GEOSGeometry('POINT (9.191884 45.464254)') # Set map center` ` g.set_srid(4326)` ` g.transform(900913)` ` default_lon = int(g.x)` ` default_lat = int(g.y)` ` default_zoom = 7` ` extra_js = ["http://maps.google.com/maps/api/js?v=3.2&sensor=false"]` ` map_template = 'gmgdav3.html'` ` admin.site.register(point, GoogleAdmin)` ` # admin.site.register(your other models...,...)`

  • admin
  • google-maps
  • geocode
  • geolocation
  • geodjango
Read More

CitySelector

CitySelector is a jquery widget, allowing to pick cities from DB, filled by django_ipgeobase application. Also it includes widget for django forms, based on mentioned jquery plugin, views and urlconf, required to provide interaction between widget and DB and middleware, populating request with correspondent location. Visit https://bitbucket.org/JustDelight/city_selector

  • jquery
  • widget
  • geolocation
  • jqueryui
  • ru
  • django_ipgeobase
Read More

Jquery ajax csrf framework for Django

1. Framework to extend the jquery ajax() function to construct post requests that contain a csrf token. 2. The example view used with the framework takes JSON data and returns JSON data containing either: 3. "success" with a message and additional dictionary of JSON data to use in the page 4. "error" with an error message. 5. The ajax function framework satisfies Django's csrf requirements by injecting a csrf token into the post requests created using the function. This example is a form with ~160 fields that we wanted to help fill in customer information to automatically. 1. User calls the lookup() script from the onblur attribute of the customer_id form field by leaving the field. 2. The lookup script takes the contents of the customer_id formfield and uses the jquery ajax() function to construct a JSON post request to the "/json /?act=" url. 3. The json view takes actions as get requests. We pass the post request to the JSON url already including the get request. "/json/?act=lookup" 4. The jquery framework in the snippet includes a csrf token in the ajax request automatically. 5. The customer_id is passed as JSON to the json view lookup action and customer details are attempted to be looked up in the database. 6. If successful the request returns a JSON dictionary of customer details which are pushed into the formfields using javascript in the lookup() function. The end result is if the user fills out the customer_id field of the form first (which we suggest with tooltip overlay) the customer name and address information will populate automatically. *Credit to Guangcong Luo https://github.com/Zarel

  • json
  • jquery
  • csrf
Read More

Admin actions as buttons instead of a menu [v2]

Add this to your admin change_list.html template to replace the actions drop-down with buttons. This is a rewritten version of snippet [1931](http://djangosnippets.org/snippets/1931/) with Django 1.3 compatibility and cleaner code. Thanks to [andybak](http://djangosnippets.org/users/andybak/) for the idea.

  • admin
  • actions
Read More

Dynamical formsets

If you need dynamical formsets you can use `{{ empty_form }}` in template and even makeup it.

  • formset
Read More

Admin related widget wrapper with edit / delete link (widget js)

Here's the python code to produce an admin related widget with the edit and delete link also. * [RelatedFieldWidgetWrapper](http://djangosnippets.org/snippets/2562) * [related-widget-wrapper.html](http://djangosnippets.org/snippets/2563) * [related-widget-wrapper.js](http://djangosnippets.org/snippets/2564) * [RelatedWidgetWrapperAdmin](http://djangosnippets.org/snippets/2565)

  • admin
  • related
  • widget
  • wrapper
Read More

JavaScript implementation of Python xrange() builtin

I don't like not having the `range()/xrange()` in JavaScript — particularly when working with [Underscore.js](http://documentcloud.github.com/underscore/) and other such libraries — so I wrote it. It's not rocket science, but it might help make the world a slightly less annoying place for a couple of people.

  • javascript
  • python
  • list
  • generator
  • array
  • builtin
  • xrange
Read More

Improve ajax progress bar by jquery extensions

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**.

  • ajax
  • javascript
  • jquery
  • upload
  • file
  • progress
  • jquery extension
Read More

Initially open collapsable fieldset class in admin

It's just an extension for the admin. Replace the collapse.js (collapse.min.js) and use it like this in the admin fieldset option: ´´**'classes': ['collapse', 'open']**´´. Without the 'open'-class, it will work as usual. *Needs possibly fixing for IE <= 8* because IE doesn't support the ´´:not´´ selector.

  • fieldset
  • collapse
  • collapsed
  • open
  • show
Read More

Google map on admin address field

Who never wished to have valid address data by showing a little google map with a marker near the address input text ? Using js only it gets quite easy.

  • gmap
  • address
  • googlemap
Read More

60 snippets posted so far.