Using Ajax in Django applications is quite easy when using dajaxproject, Dajax and Dajaxice.
I assume you have pip installed on your system, if that’s not the case, install it.
The first step is to download and install Dajax core:
pip install -e git://github.com/jorgebastida/django-dajax.git#egg=django-dajax
Copy your flavoured prototype function.
Download and install Dajaxice:
pip install -e git://github.com/jorgebastida/django-dajaxice#egg=django-dajaxice
In the application where the Ajax funtionality is required, create an “ajax.py” file with the required Ajax functions.
In the example below it will load cities from a selected country, a tipical problem of master-detail chained selects.
from dajax.core import Dajax
from dajaxice.decorators import dajaxice_register
from my_app.models import City
@dajaxice_register
def updateCity(request, option):
dajax = Dajax()
options = City.objects.filter(country.id=option)
out = ""
for o in options[int(option)]:
out += "%s%s" % (out,o,)
dajax.assign('#id_city','innerHTML',out)
return dajax.json()
The Ajax function is a simple function that must be registered with the @dajaxice_register anotation.
It gets the cities from a specific country and assigns those values to the innerHTML of the id_city HTML object.
In the forms, the country must call the “updateCity” Ajax funtion to load the cities on the select country.
[...]
#
# Address
#
class AddressForm(forms.Form):
"""
Address form
"""
[...]
country = forms.ModelChoiceField(widget = forms.Select(attrs = {'onchange' : "Dajaxice.acg.updateCity(Dajax.process,{'option':this.value});"}), queryset=Country.objects.all(), required=True, empty_label = lcountry_empty, label=lcountry, help_text = lcountry_help, error_messages={'required': lcountry_required})
city = forms.ModelChoiceField(queryset=City.objects.all(), required=False, empty_label = lcity_empty, label=lcity, help_text = lcity_help)
address = forms.CharField(widget=forms.Textarea(attrs={'cols': 20, 'rows': 3}), min_length=10, max_length=50, label='Address')
zip = forms.CharField(max_length=60, required=True, label='Zip code' )
[...]
The only change here, regarding to a common form definition, is to inject the call of the Ajax “updateCity” function on the “onChange” event. Note that the city must be called “city” in order to bind with the HTML id_city object (remember, Django gives “id_” to the id)
Finally, your HTML file must include the jquery.dajax.core.js file in the HEAD section. Copy it to someplace where the browser will be able to load it, like
<script src="/media/dajax/jquery.dajax.core.js" type="text/javascript" charset="utf-8"></script> And this is all one requires to do in order to have Ajax working on a Django application.
