Login

All snippets written in JavaScript

60 snippets

Snippet List

Unobtrusvie Foldable Admin Interface

Inspired by [snippet 550](http://www.djangosnippets.org/snippets/550/), this allows you to expand or collapse apps in the main Admin screen. Requires jQuery. If jquery.cookie.js is available it will remember which apps you have expanded. Recommended usage: Place the JavaScript in a file called `admin-expand.js`. Create `templates/admin/base_site.html` in your templates directory (which is also a good place to [brand your Admin](http://djangobook.com/en/1.0/chapter06/#cn70)). Put the following code near the top, and you're done (adjusting file paths as needed). {% extends "admin/base.html" %} {% block extrahead %} <script type="text/javascript" src="jquery-latest.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="admin-expand.js"></script> {% endblock %}

  • admin
  • jquery
Read More

Client-side Django-style date & time string formatting

This is a reasonably straight forward port of functionality provided by the `django.utils.dateformat` module into a method extending JavaScript's Date object. Its intended use is to allow client-side dynamic content to share the same date & time string formatting as Django template markup. By using this in conjunction with a context processor (to pass a format string to all templates) you can switch formats for both server-generated & client-generated dates across a complete site with a single setting. The function supports *almost* the entire format -- as listed by the Django documentation for the [now template tag](http://www.djangoproject.com/documentation/templates/#now) -- with the exception of "I" & "T". As a 'dumb' illustration, the following template tag usage: It is {% now "jS F Y H:i" %} ...could equate to the following: It is <script type="text/javascript">var now = new Date(); document.write(now.strfdate('jS F Y H:i'));</script> It's not extensively tested (I only wrote it over the weekend), but seems to be working okay. Feel free to leave any corrections or suggestions in the comments, and I'll try to keep this entry updated if I make any fixes or changes.

  • javascript
  • dynamic
  • datetime
  • date
  • format
  • time
  • string
  • now
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

Python-like string interpolation in Javascript

Provides python-like string interpolation. It supports value interpolation either by keys of a dictionary or by index of an array. Examples: interpolate("Hello %s.", ["World"]) == "Hello World." interpolate("Hello %(name)s.", {name: "World"}) == "Hello World." interpolate("Hello %%.", {name: "World"}) == "Hello %." This version doesn't do any type checks and doesn't provide formating support.

  • template
  • javascript
  • string interpolation
  • replace
Read More

Admin actions as buttons instead of a menu

Add this to any admin changelist and your actions drop-down will be replaced with user-friendly buttons. Why mess around with templates and subclassing admin classes when you can just mangle the page with jQuery! ;-) It also adds a 'select all' label to explain the mystery top check-box (well it was a mystery to several of my clients). The line "if ($('div.actions option:gt(0)').length<=8)" checks that there aren't more than 8 actions and falls back to the drop-down if there are. Requires jQuery to be loaded.

  • admin
  • actions
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

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

In page edit object links

This javascript has the functionality of the 'Edit Object' bookmarklet as [described by James Bennett](http://www.b-list.org/weblog/2007/nov/07/bookmarklets/) but instead of putting it within a bookmarklet it creates a div on the page with a link to the main admin screen, an edit the object link, and logout link. Just include the javascript on any page you want the links to show up on and make sure that the page is using the populate_xheaders function to provide the needed headers as [described here](http://www.b-list.org/weblog/2007/nov/07/bookmarklets/). The built in generic views provide the needed headers by default.

  • admin
  • edit-object-links
Read More

jQuery Autocomplete

A merged version of the many jQuery autocomplete widgets. See [1](http://php.scripts.psu.edu/rja171/widgets/autocomplete.php) and [2](http://www.dyve.net/jquery/?autocomplete) for more information.

  • jquery
  • autocomplete
Read More

More admin clock time increments

This is quite a hack (need to modify Django code), but relatively simple and stable. It displays various times in whichever increments and columns you specify, rather than just Midnight, Noon, Now & 6am. You can use it throughout your admin and newforms-admin code. This is a (slightly updated) copy of the ticket #1848 which wasn't included in trunk. http://code.djangoproject.com/ticket/1848

  • admin
  • time
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

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

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