Login

Tag "javascript"

45 snippets

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)

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

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

Custom color field with Javascript color picker

A custom model field 'ColorField' which stores a hex color value like '#FFFFFF' and shows a Javascript color picker in the admin rather than a raw text field. It is written to work with the current trunk (i.e. after newforms-admin merge). You'll need the ColorPicker2.js file found at [www.mattkruse.com](http://www.mattkruse.com/javascript/colorpicker/combined_compact_source.html) (his license prohibits including the file here). This should be placed in the 'js' folder of your admin media. The snippet includes a python source file which can be placed wherever you wish, and a template which by default should be placed in a folder 'widget' somewhere on your template path. You can put it elsewhere, just update the path ColorWidget.render The custom field at present does not validate that the text is a valid hex color value, that'd be a nice addition.

  • newforms
  • javascript
  • models
  • admin
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

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

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

Load dynamically loaded form javascript assets using dajax

I am used to load forms directly into modals using dajax but I found out I had to load the scripts using an ajax call from the browser. You can see here an example of a dynamically loaded form and the function used to load the scripts.

  • ajax
  • javascript
  • forms
  • script
  • dynamically-loaded-form
  • form-assets
  • dajax
Read More

Making prepopulate_from work with ForeignKeys and other sorts of choice fields

This is a fairly small bit template that, if placed in your_project_dir/templates/admin/prepopulated_fields_js.html will override the template that is normally pulled by the preopulated fields templatetag in the admin. The result is that you can successfully specify a ForeignKey or other field involving choices as a source for prepopulate_from in your admin.py. It works just as well when there are multiple fields of both the text and choice variety.

  • javascript
  • admin
  • prepopulate
Read More

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

Filter change list by a date range

The Django admin site has a feature to filter objects in change list by parameters supplied in the query string. Particularly, parameters such as date\__gte and date\__lte can be used. This example is for filtering objects in change list by a date range (the date field is called expiration_date, but you can, of course, use any other name). As the server side (Django) already supports such filtering, all you need to do is to edit this for your needs (you can also add some DRY if you want) and put it into templates/admin/app_name/model_name/change_list.html. Some CSS for better layout: div.date_filter select#from_month, div.date_filter select#to_month { margin-left: 0; } div.date_filter label { margin-right: 5px; }

  • javascript
  • date
  • jquery
  • html
  • change_list
  • change-list
  • date-range
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

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