Changes between Version 20 and Version 21 of AjaxDjangoDojoForm


Ignore:
Timestamp:
06/06/2006 10:58:09 AM (9 years ago)
Author:
coulix
Comment:

part2

Legend:

Unmodified
Added
Removed
Modified
  • AjaxDjangoDojoForm

    v20 v21  
    11{{{
    22#!html
    3 <h1>Ajax with Dojo</h1>
    4 }}}
    5 
     3<h1>Ajax with Dojo and simpleJson</h1>
     4}}}
     5'''Inner links'''
     6{{{
     7#!html
     8Part 1 <br/> <a href="#P1">Ajax basic form submition, Django server answer return to Ajax call.</a>
     9<br/>
     10Part 2 <br/><a href="#P2">Handling the form when JavaScript is desactivated.</a>
     11}}}
     12
     13
     14{{{
     15#!html
     16<a name="P1"><h1>Ajax basic form submition, Django server answer return to Ajax call.</h1></a>
     17}}}
    618'''Ajax form submition using Dojo for the client side  javaScript toolkit, and simpleJson for the client/server communication.'''
    719
     
    184196sys.path +=['/home/coulix/progz/json']
    185197}}}
    186 
    187 
    188198log out/in and try import simple_json (or simplejson depends on what source you picked)
    189199
     200{{{
     201#!html
     202<a name="P2"><h1>Handling the form when JavaScript is desactivated.</h1></a>
     203}}}
     204If a user has desactivated his browser javascript support, or is using a text mode browser, we need a way of making the previous marking button submit the mark to the server which should this time return an html template instead of data to the Ajax call.
     205
     206== Updating the form HTML (details.html template)==
     207This time we put a submit type input inside the form instead of the button type in part 1.
     208type="submit" as indicates its name, submits the form to the server,we will need a way of stopping this behavior using javaScript.
     209
     210{{{
     211                <form  enctype="multipart/form-data" id="myForm" method="post">
     212                        <span id="mark_message">{{mark_message}}</span>
     213                        <select name="select_mark">
     214                                [...]
     215                        </select>
     216                        '''<input id="sendFormButton" type="submit" value="Notez" />'''
     217                </form>
     218}}}
     219
     220Now, how can we tell our details method in view.py to know if it comes from a normal submit request or an Ajax request ?
     221Two solutions,
     222
     223The '''first''' uses a hidden variable in form.html and an added content element in the JS part.
     224
     225{{{
     226    function sendForm()
     227    {
     228     dojo.byId("mark_status").innerHTML = "Loading ...";
     229     dojo.io.bind({
     230                    url: '.',
     231                    handler: sendFormCallback,
     232                    content: {"js", "true"},
     233                    formNode: dojo.byId('myForm')
     234                });
     235    }
     236
     237
     238[...]
     239<form  enctype="multipart/form-data" id="myForm" method="post">
     240[...]
     241<input type="hidden" name="js" value="false">
     242[...]
     243}}}
     244
     245With this, in our django method in view.py we can test for request["js"]=="true" it would means that Js is activatd and we return the appropriate answer to the Ajax request.
     246
     247The '''second''' uses the url to pass a new variable ajax_or_not to the detail method.
     248
     249{{{
     250#!python
     251def details(request, r_slug, r_cat, ajax_or_not=None):
     252[...]
     253}}}
     254
     255We modify the url.py to accept this new parameter.
     256{{{
     257#!python
     258(r'^recettes/(?P<r_cat>[-\w]+)/(?P<r_slug>[-\w]+)/(?P<ajax_or_not>.*)$', 'cefinban.recettes.views.details'),
     259}}}
     260
     261The dojo binding need to append a variable to the original document url, to make ajax_or_not not None.
     262
     263{{{
     264    function sendForm()
     265    {
     266     dojo.byId("mark_status").innerHTML = "Loading ...";
     267     dojo.io.bind({
     268                    url: './ajax/',
     269                    handler: sendFormCallback,
     270                    formNode: dojo.byId('myForm')
     271                });
     272    }
     273}}}
     274
     275== New details method in view.py==
     276
     277We just need to test for the existence of ajax_or_not
     278
     279{{{
     280#!python
     281def details(request, r_slug, r_cat, ajax_or_not=None):
     282[...]
     283        if request.POST:
     284                [...] same as part 1
     285                # except here we check ajax_or_not
     286                if  ajax_or_not:
     287                        # use json for python js exchange
     288                        # it was a french string, if we dont't use unicode
     289                        # the result at the output of json in Dojo is wrong.
     290                        message = unicode( message, "utf-8" )
     291                        jsonList = simple_json.dumps((my_mark, total, form_message ,message))
     292                        return HttpResponse(jsonList)
     293
     294        return render_to_response('recettes/details.html', {'r': r, 'section':'index',
     295                 'mark_status':message , 'mark_message':form_message, 'my_mark': my_mark},
     296                  context_instance=RequestContext(request),)
     297}}}
     298
     299
     300
    190301Any troubles : coulix@gmail.com
    191302
    192 
Back to Top