Code

Changes between Version 20 and Version 21 of AjaxDjangoDojoForm


Ignore:
Timestamp:
06/06/06 08:58:09 (8 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