Login

All snippets written in JavaScript

60 snippets

Snippet List

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

simple jquery example

Displays an input with an add button. Clicking the add button creates a simple form - input with a submit button. Clicking the submit button will send the output to the server and return a value which is displayed.

  • ajax
  • jquery
Read More

Get Latitude and Longitude from google maps

I use this to integrate a google map in a form renderd by newforms. If someone click on the map and set a icon, the Latitude and Longitude data goes into the 2 form fields. You need to generate a google API key (http://www.google.com/apis/maps/signup.html) for the GOOGLE_KEY variable.

  • google
  • latitude
  • longitude
  • googlemaps
Read More
Author: b23
  • 1
  • 14

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

Ajax progress bar

This snippet is an example of an ajax progress bar (using jquery) that you might use in conjunction with <http://www.djangosnippets.org/snippets/678/>. 1. Generates a uuid and adds X-Progress-ID to the forms action url. 2. Adds the progress bar to the page. (you'll have to add some css styling for this) 3. Makes period ajax requests to update the progress bar.

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

Dynamical formsets

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

  • formset
Read More

jQuery ajax search

This is the result of my first tests with jQuery and Django. After entering a search term it gets search results using ajax and json. Then is uses the rather crude `result_table` function to generate a table of results. Django is on the serverside for generating json

  • ajax
  • jquery
Read More

JavaScript implementation of Python xrange() builtin

I don't like not having the `range()/xrange()` in JavaScript &mdash; particularly when working with [Underscore.js](http://documentcloud.github.com/underscore/) and other such libraries &mdash; 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

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

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

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

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