Login

Tag "javascript"

45 snippets

Snippet List

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

Email obfuscation filter using ROT13

An email address obfuscation template filter based on the ROT13 Encryption function in Textmate's HTML bundle. The filter should be applied to a string representing an email address. You can optionally pass the filter an argument that will be used as the email link text (otherwise it will simply use the email address itself). Example usage: {{ email_address|obfuscate:"Contact me!" }} or {{ email_address|obfuscate }} Of course, you can also use this on hardcoded email addresses, like this: {{ "[email protected]"|obfuscate }}

  • filter
  • javascript
  • email
  • textmate
  • obfuscation
  • rot13
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

Dynamically add inlines

These functions use JQuery to dynamically add new entries for stacked or tabular inlines on a change form. To enable it, change the parent model to include this Javascript as well as JQuery. Here's an example: class MeetingAdmin(admin.ModelAdmin): inlines = [MeetingDonationInline, MeetingExtraInline] class Media: js = ["/media/jquery-1.3.2.min.js", "/media/dynamic_inlines.js"]

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

Templatetag for JS merging and compression

**Javascript merging and compression templatetag** One of the most important things for improving web performance is to reduce the number of HTTP requests. This is a templatetag that merges several javascript files (compressing its code) into only one javascript. It checks if this merged file is up to date, comparing modification time with the other javascripts to merge. Usage: {% load jsmerge %} {% jsmerge mergedfile js/file1.js js/file2.js js/file3.js %} The previous code will: 1. Search in `settings.MEDIA_ROOT` for all files passed by parameter. 2. Create a `/path/to/media_root/mergedfile.js` (if it doesn't exist or it's not up to date). This file is a merging plus compression of all javascripts. 3. Return this HTML fragment: `<script type="text/javascript" src="/media_url/mergedfile.js"></script>`

  • javascript
  • merging
  • compression
  • tunning
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

A dict template tag

When you need to include a specific javascript file/code snippet in your page, it's always better to do it at the bottom of your page to avoid to block the rendering too soon. This tag provide you a nice way to include and launch only what is needed: Example in an included template that need to display google maps: {% dict js_file google_api %} <script src="http://www.google.com/jsapi?key={{ MAPS_API_KEY }}" type="text/javascript" charset="utf-8"></script> <script src="{{MEDIA_URL}}js/map.display.js" type="text/javascript">...</script> {% enddict %} {% dict js_code link_map %} $('.show-map').click(function() { ... }); $('.hide-map').click(function() { ... }); {% enddict %} Finaly you just have to add this to the very bottom of your base.html file: .... </body> {% for k,v in js_file.items %} {{v}} {% endfor %} <script type="text/javascript"> /* <![CDATA[ */ {% for k,v in js_code.items %} {{v}} {% endfor %} /* ]]> */ </script> </html>

  • template
  • javascript
  • dict
  • stack
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

Template Tag to protect the E-mail address

This is a Django Template Tag to protect the E-mail address you publish on your website against bots or spiders that index or harvest E-mail. It uses a substitution cipher with a different key for every page load. It basically produce a equivalent Javascript code for an email address. This code when executed by browser make it mailto link. **Usage** `{% encrypt_email user.email %}` **More Info ** [Template Tag to protect the E-mail address](http://www.nitinh.com/2010/02/django-template-tag-to-protect-the-e-mail-address/)

  • template
  • django
  • javascript
  • email
  • template-tag
  • obfuscate
  • bots
  • spider
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

Adding buttons to submit line in a Admin page

**Attention: this snippet depends on jQuery library to works** The Admin templates hierarchy does not allow you change the submit line (that buttons bar in the footer of the change view of a model class). This code shows how to resolve this, using a simple javascript trick. You can read the code and implement using your favorite javascript library (instead of jQuery) or pure JavaScript. This example regards to User Profile, a common used model class that adds custom fields to a user in the authentication system. To use this, you must put this template code in a file with the following name: templates/admin/auth/user/change_form.html

  • template
  • ajax
  • javascript
  • admin
  • query
Read More

Generating Taconite command documents

Hello, This is a port of a php class used to generate XML taconite command documents, useful for (very) easy and powerful ajaxy stuff, if you don't know what that is just check it there in french : http://www.desfrenes.com/playground/taconite/ or there in english : http://www.malsup.com/jquery/taconite/. Basically what it does is generate an XML document that is later processed by a javascript plugin which executes a serie of DOM modifications. About the code, I'm a Django beginner as well as a Python beginner so kind advices are welcome. Cheers.

  • ajax
  • django
  • javascript
  • python
  • jquery
  • taconite
  • minidom
  • dom
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

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