'''Ajax form submition using Dojo for the client side JavaScript library, and SimpleJson for the client/server communication.''' This will take you through all the steps required to get started and to develop a handy form submittion without reload. == What do you need : == - Django - Dojo (v0.3) [http://dojotoolkit.org/] an open source javascript toolkit. - Simple_Json (v1.3) [http://svn.red-bean.com/bob/simplejson/tags/simplejson-1.3/docs/index.html] used for java <-> python communication. == What do we want to achieve == I will use the model of my current website, a recipe one. When a registred user see the details of a recipe, he can mark it or update his mark by selecting a small drop down list. That's nice but when he clicks ok the whole page is reloaded :/ let's use some Ajax to make it transparent and for the fancy effect we can add fading status message like "Your mark has been updated". The select box proposes a mark from 1 to 5, it is actually a form which is sent to the server via POST, which in django link to a method in the view.py : ''def details(request)'' which do the innerwork for the details page generation. == Installing Json == get the SimpleJson from svn. {{{ svn co http://svn.red-bean.com/bob/simplejson/trunk/ json cd json sudo python setup.py install }}} == Django part == '''view.py''' {{{ def details(request): [more stuff] if request.POST: # Get all the mark for this recipe # its not the best way i sould hava an oter entry or table, with total and nbr of marks for # each recipe. list_mark = Mark.objects.values('mark').filter(recipe__pk=r.id) # loop to get the total total = 0 for element in list_mark: total+= element['mark'] # round it total = round((float(total) / len(list_mark)),1) # update the total r.total_mark= total # save the user mark r.save() # Now the intersting part for this tut import simple_json # it was a french string, if we dont't use unicode # the result at the output of json in Dojo is wrong. message = unicode( message, "utf-8" ) # jsonList = simple_json.dumps((my_mark, total, form_message ,message)) return HttpResponse(jsonList) [more stuff, if not POST return render_to_response('recettes/details.html' ...] }}} '''url.py''' Just normal url.py, remember the path which will point to the wanted method. {{{ from django.conf.urls.defaults import * urlpatterns = patterns('', [...more...] (r'^recettes/(?P[-\w]+)/(?P[-\w]+)/$', 'cefinban.recettes.views.details'), [...more...] }}} == Html template with Dojo javascript == '''Dojo use''' {{{ {% load i18n %} {% extends "base.html" %} {% block script %} }}} the following ''HTML code'' just comes after the upper code snipset. {{{ [... total mark get updated, lets put css id="mark_total" ...] {% if r.total_mark %}
  • Score: {{ r.total_mark }}/5
  • {% endif %} [....] {% if not user.is_anonymous %} {% ifnotequal user.id r.owner_id %}
    {{mark_message}}

    {{ mark_status }} {% endifnotequal %} {% endif %} }}} And, voila. To have a demo use guest as login, guest as password here [http://ozserver.no-ip.com:345] or if not working here [http://www.cefinban.net]. Go to index and pick a recipe, update the mark. You can also have a look at the screenshot here : [http://ozserver.no-ip.com/~greg/images/ajaxdjango.png] Hope it was useful. I am using dreamhost for hosting, and no sinplejson is installed. Instead put the source in a folder eg /proz/json/simple_json simple_json will contanit __init__.py ect. and in your ~/.bash_profile replace/put this {{{ export PYTHONPATH=$PYTHONPATH:$HOME/django/django_src:$HOME/django/django_projects:$HOME/progz/json }}} log out/in and try import simple_json (or simplejson depends on what source you picked) Any problems : coulix@gmail.com coulix