Login

All snippets written in JavaScript

60 snippets

Snippet List

jstree integration to django admin

You have some tree-like structure in your models, for example: `class MyModel(models.Model): parent = models.ForeignKey('self', verbose_name=u'Parent', \ null=True, blank=True, related_name='children') name = models.CharField(u'Раздел', max_lengtch=255) position = PositiveSmallIntegerField(u'Позиция', default=0) class Meta: ordering = ('position',)` To see it as a tree in admin's object list(you also can sort items, move to another parents by drag-n-drop; and rename them) add this to admin.py: `class MyModelAdmin(admin.ModelAdmin): ordering = ('position',) list_display = ('pk','name','parent','position') raw_id_fields =('parent',) list_per_page = 900 #we sould have all objects on one page list_editable = ('name','position','parent') def parent_id(self,obj): return obj.parent and obj.parent.id or '0' class Meta: model = MyModel class Media: js = [settings.MEDIA_URL + s for s in ('lib/jquery-1.3.2.min.js', 'lib/jquery.tree.min.js', 'lib/plugins/jquery.tree.contextmenu.js', 'lib/mymodel_admin.js',)] css = { 'all':(settings.MEDIA_URL+'css/nestedsortablewidget.css',) }` mymodel_admin.js is the code listed here, if you have different title field(not "name"), change var title_column in javascript, list_display and list_editable. jstree can be obtained here: [jstree](http://www.jstree.com/) screenshot is in [my blog](http://tabed.org/blog/2010/01/06/jstree-in-django-admin/)

  • admin
  • model
  • tree
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

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

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

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

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

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

FCKEditor replace all vLargeTextField in admin

If you want to add an fckeditor for every vLargeTextField (the input class used by models.TextField) you can use this javascript. you can load that in all admin pages overriding templates/admin/base_site.html with this: {% extends "admin/base.html" %} {% load i18n %} {% block title %}{{ title }} | {% trans "Administrative Area" %}{% endblock %} {% block branding %} <h1 id="site-name">{% trans "Administrative Area" %}</h1> {% endblock %} {% block nav-global %}{% endblock %} {% block extrahead %}{{ block.super }} <script src="{{media_url}}js/jquery.js" type="text/javascript"></script> <script src="{{media_url}}fckeditor/fckeditor.js" type="text/javascript"></script> <script src="{{media_url}}fckeditor/custom/vTextField.js" type="text/javascript"></script> {% endblock %}

  • admin
  • textfield
  • rich-text-editor
  • fckeditor
  • vlargtextfield
Read More

django-mptt enabled replacement for SelectBox.js

This snippet is used in conjunction with the code in [#1779](http://www.djangosnippets.org/snippets/1779/) to make an mptt-enabled version of the FilteredSelectMultiple widget. See my blog for full details: [http://anentropic.wordpress.com](http://anentropic.wordpress.com/2009/11/05/more-django-mptt-goodness-filteredselectmultiple-m2m-widget/)

  • widget
  • mptt
Read More

Confirm alert if the user navigates away without saving changes

A confirm alert is displayed if the user has made any changes to the form, and attempts to navigate away from the page without saving (click the back button, hit reload, click the breadcrumbs, logout, etc). Much like GMail's "Your message has not been sent. Discard your message?" prompt. **Uses the JavaScript helpers built into Django**, without relying on 3rd party libs like jQuery. (There might be simpler options if you're already using [jQuery](http://code.google.com/p/protect-data/) or [prototype](http://stackoverflow.com/questions/925111/activating-onbeforeunload-only-when-field-values-have-changed/1013033#1013033)). To use this, simply create a [custom admin template](http://docs.djangoproject.com/en/dev/ref/contrib/admin/#overriding-admin-templates). For example at: *templates/admin/YOUR_APP_NAME/change_form.html* {% extends "admin/change_form.html" %} {% block after_related_objects %} {{ block.super}} <script type="text/javascript"> ... script goes here ... </script> {% endblock %}

  • admin
  • change-form
Read More

ajax error sink

Often its useful to get error information for ajax/javascript errors happening on various clients. This can go to something like this: # error_sink def error_sink(request): # post request, with event name in "event", and event data in "data" context = request.REQUEST.get("context", "") context = cgi.parse_qs(context) context["data"] = cgi.parse_qs(context.get("data", [""])[0]) context["user"] = request.vuser context["referrer"] = request.META.get('HTTP_REFERER', "referrer not set") context = pformat(context) send_mail( "ajax error", context, "[email protected]", ["[email protected]",], fail_silently=True ) return JSONResponse({"status": "ok" }) # }}}

  • ajax
  • jquery
  • error
  • reporting
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