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.
- newforms
- jquery
- dynamic-formset
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
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
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)
- newforms
- multiple
- forms
- jquery
- select
- widget