I recently worked on an application, where I had to provide a way for users to search for objects based on user-defined properties attached to these objects. I decided to model the search form using a formset, and I thought it'd be a good idea to allow users dynamically add and remove search criteria.
The script (dynamic-formset.js) should be re-usable as-is:
1. Include it in your template (don't forget to include jquery.js first!).
2. Apply the 'dynamic-form' class to the container for each form instance (in this example, the 'tr').
3. Handle the 'click' event for your `add` and `delete` buttons. Call the `addForm` and `deleteForm` functions respectively, passing each function a reference to the button raising the event, and the formset prefix.
That's about it. In your view, you can instantiate the formset, and access your forms as usual.
This uses the Really Simple Color Picker in jQuery:
http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/
Get source from there or GitHub:
http://github.com/laktek/really-simple-color-picker/tree/master
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).
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" })
# }}}
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.
This patch allows to open a popup to edit the selected object of either the left or right select input of a filter_horizontal or filter_vertical field, when pressing the "Insert" key.
Being a noob with general client-side issue, it's served as a patch that suits my needs. Maybe it's possible to do it cleaner by overloading the javascript methods, or get rid of the jquery dependency in order to integrate it into django trunk ... Any contribution is welcome! It's licensed under WTFPL license.
Requires jquery.
This is a general JQuery Autocomplete Form Field for selecting any model instance in your forms.
1 Download jquery.1.2.6 and the jquery autocomplete plugin http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/, place theme somewhere in your media directory (in this case {{ MEDIA__URL}}/js/
2 copy fields.py to anywhere in your python-path (in this case utils.fields)
3 create a view for the ajax request that receives a query and returns a key|value list, and register it in your urls.py
4 Just Use the fields in any form like in forms.py
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
An easy way of making inlines orderable using drag-and-drop, using [jQuery UI's](http://ui.jquery.com/) sortable() plugin.
First, add an "order" field to the inline models which is an IntegerField, and set that model to use 'order' as its default order_by.
Then hook in the JavaScript. This should make them drag-and-drop sortable using jQuery UI, and also hide the divs containing those order fields once the page has loaded. This technique is unobtrusive: if JavaScript is disabled, the order fields will be visible and the user will be able to manually set the order by entering numbers themselves.
Another sample of how to integrate Django and jQuery.
===
This starts a function in views.py that takes a long time to finish. It sets a session variable so that another function can report on the situation. We use jquery and ajax to 'pull' that data from Django so as to provide a progress report.
I don't yet know how to background a long-running process, but this is an okay stop-gap method to use. I hope.
\d
I recently got a form working via jQuery and Django. This was not easy for me to do and I thought I'd record my finding here.
The form submits via jQuery and the "form" plugin. Please visit jQuery's home page to find all those links.
This code handles:
* urls.py -- passing both normal and 'Ajax' urls to a view.
* views.py -- Handling both kinds of requests so that both normal and ajax submits will work.
* The HTML template with the script for submitting and some bling.
Error handling
===
I like to stay DRY so the idea of checking the form for errors in javascript *and* checking it in Django irks me. I decided to leave that up to Django, so the form submits and gets validated on the server. The error messages are sent back to the browser and then displayed.
with jQuery and [jQuery templates](http://plugins.jquery.com/project/jquerytemplate) you can use the django template language on the client-side with javascript.
This snippet shows how to disable fields in a edit page in the oldforms admin using jquery.
The idea is to add the javascript to the edit page using the `js` attribute of the model's `Admin` class. In this case jQuery and a custom javascript file are added.
The javascript sets the `disabled` attribute of the `name` field to `true` as soon as the document is ready.
Observation: depends on jQuery to works!
This widget works like other multiple select widgets, but it shows a drop down field for each choice user does, and aways let a blank choice at the end where the user can choose a new, etc.
Example using it:
class MyForm(forms.ModelForm):
categories = forms.Field(widget=DropDownMultiple)
def __init__(self, *args, **kwargs):
self.base_fields['categories'].widget.choices = Category.objects.values_list('id', 'name')
super(MyForm, self).__init__(*args, **kwargs)