Changes between Version 20 and Version 21 of AjaxDjangoDojoForm

Timestamp:

Jun 6, 2006, 10:58:09 AM (18 years ago)

Author:

coulix

Comment:

part2

AjaxDjangoDojoForm

@@ -1 +1 @@
 {{{
 #!html
-<h1>Ajax with Dojo</h1>
-}}}
-
+<h1>Ajax with Dojo and simpleJson</h1>
+}}}
+'''Inner links'''
+{{{
+#!html
+Part 1 <br/> <a href="#P1">Ajax basic form submition, Django server answer return to Ajax call.</a>
+<br/>
+Part 2 <br/><a href="#P2">Handling the form when JavaScript is desactivated.</a>
+}}}
+
+
+{{{
+#!html
+<a name="P1"><h1>Ajax basic form submition, Django server answer return to Ajax call.</h1></a>
+}}}
 '''Ajax form submition using Dojo for the client side  javaScript toolkit, and simpleJson for the client/server communication.'''
 
@@ -184 +196 @@
 sys.path +=['/home/coulix/progz/json']
 }}}
-
-
 log out/in and try import simple_json (or simplejson depends on what source you picked)
 
+{{{
+#!html
+<a name="P2"><h1>Handling the form when JavaScript is desactivated.</h1></a>
+}}}
+If 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.
+
+== Updating the form HTML (details.html template)==
+This time we put a submit type input inside the form instead of the button type in part 1.
+type="submit" as indicates its name, submits the form to the server,we will need a way of stopping this behavior using javaScript.
+
+{{{
+                <form  enctype="multipart/form-data" id="myForm" method="post">
+                        <span id="mark_message">{{mark_message}}</span>
+                        <select name="select_mark">
+                                [...]
+                        </select>
+                        '''<input id="sendFormButton" type="submit" value="Notez" />'''
+                </form>
+}}}
+
+Now, how can we tell our details method in view.py to know if it comes from a normal submit request or an Ajax request ?
+Two solutions,
+
+The '''first''' uses a hidden variable in form.html and an added content element in the JS part.
+
+{{{
+    function sendForm()
+    {
+     dojo.byId("mark_status").innerHTML = "Loading ...";
+     dojo.io.bind({
+                    url: '.',
+                    handler: sendFormCallback,
+                    content: {"js", "true"},
+                    formNode: dojo.byId('myForm')
+                });
+    }
+
+
+[...]
+<form  enctype="multipart/form-data" id="myForm" method="post">
+[...]
+<input type="hidden" name="js" value="false">
+[...]
+}}}
+
+With 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.
+
+The '''second''' uses the url to pass a new variable ajax_or_not to the detail method.
+
+{{{
+#!python
+def details(request, r_slug, r_cat, ajax_or_not=None):
+[...]
+}}}
+
+We modify the url.py to accept this new parameter.
+{{{
+#!python
+(r'^recettes/(?P<r_cat>[-\w]+)/(?P<r_slug>[-\w]+)/(?P<ajax_or_not>.*)$', 'cefinban.recettes.views.details'),
+}}}
+
+The dojo binding need to append a variable to the original document url, to make ajax_or_not not None.
+
+{{{
+    function sendForm()
+    {
+     dojo.byId("mark_status").innerHTML = "Loading ...";
+     dojo.io.bind({
+                    url: './ajax/',
+                    handler: sendFormCallback,
+                    formNode: dojo.byId('myForm')
+                });
+    }
+}}}
+
+== New details method in view.py==
+
+We just need to test for the existence of ajax_or_not
+
+{{{
+#!python
+def details(request, r_slug, r_cat, ajax_or_not=None):
+[...]
+        if request.POST:
+                [...] same as part 1 
+                # except here we check ajax_or_not
+                if  ajax_or_not:
+                        # use json for python js exchange
+                        # 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)
+
+        return render_to_response('recettes/details.html', {'r': r, 'section':'index',
+                 'mark_status':message , 'mark_message':form_message, 'my_mark': my_mark},
+                  context_instance=RequestContext(request),)
+}}}
+
+
+
 Any troubles : coulix@gmail.com
 
-