Changes between Version 16 and Version 17 of AJAX/Dojo/RefactoredFormSubmit


Ignore:
Timestamp:
Feb 16, 2007, 7:42:35 AM (18 years ago)
Author:
erob@…
Comment:

updated ajax.js

Legend:

Unmodified
Added
Removed
Modified

  • AJAX/Dojo/RefactoredFormSubmit

    v16 v17  
    22=== Introduction ===
    33
    4 Here's a simple recipe that worked for me. It is quite inspired by the [wiki:AjaxDojoFormSub] example―and from [http://www.b-list.org/weblog/2006/07/31/django-tips-simple-ajax-example-part-1 this tutorial]―except that this  recipe is expected to use python-cjson for receiving JSON data.
     4Here's a simple recipe that worked for me. It is quite inspired by the [wiki:AjaxDojoFormSub] example―and from [http://www.b-list.org/weblog/2006/07/31/django-tips-simple-ajax-example-part-1 this tutorial]―except that this recipe is using python-cjson to receive JSON-encoded data.
    55
    6 My initial objective was to display validation errors without doing a page-refresh, by using JSON for carrying errors (or whatever else you could possibly imagine) back to the client browser.
     6My initial objective was to display validation errors without doing a page-refresh, while using
     7JSON for carrying errors (or whatever else you could possibly imagine) back to the client browser.
    78
    89=== The server view ===
    … …  
    1213
    1314{{{
     15#!python
    1416import cjson
    1517from django.http import HttpResponse
    … …  
    2527          return HttpResponse(cjson.encode(form.errors), mimetype='text/javascript')
    2628       else:
    27           # vanilla Http response fallback
    28           return HttpResponse(t.render(Context({'errors' : form.errors }))
     29          # No JSON here!
     30          return HttpResponse(t.render(Context(form.errors))
    2931    else:
    3032       # Do something when the form has been validated.
    … …  
    3436=== The client view ===
    3537
    36 Now that the server view is writtent, we could try next to arrange the client code to fit into one, unportable template chunk, however it's
    37 usually best to split the work in smaller pieces, at least for being nice to the maintainers (You). :-)
     38Once the server view has been written, the idea is to write down the client UI (or view,
     39depending whether you're a purist or not.. ;-)
    3840
    39 So let's move on in writing our own Dojo template, where we will make an abstraction of all our applied Dojo concepts.
    40 
    41 Quite frankly, that part is going straight-forward, as we're only writing HTML:
     41Quite frankly, that step is straight-forward, and looks pretty-much like writing down
     42basic HTML:
    4243{{{
    4344#!text/html
    4445<script type="text/javascript">
    4546    djConfig = {
    46         isDebug:true,
    47         debugAtAllCosts:false
     47        isDebug: true,
     48        debugAtAllCosts: false
    4849    };
    4950</script>
    … …  
    5455    dojo.require("dojo.json");          // serialization to JSON
    5556</script>
     57<!-- Here's the client UI script to play with Dojo  -->
    5658<script type="text/javascript" src="/media/js/ajax.js"></script>
    5759}}}   
    … …  
    6163or something else.
    6264
    63 Optionally, you can "bake" your own Dojo file, and substract the baked modules
    64 from the list of required modules above, so we wont load the already compiled
    65 Dojo modules twice.   
     65To avoid loading the Dojo modules twice (for speed), just roll your own Dojo script,
     66and then remove the implied ("baked") modules from the list of required modules above.
    6667
    67 === Form validating w/ dojo.io.bind ===
     68=== Form validating with dojo.io.bind ===
    6869 
    6970Let's complete our application by writing down the core JS file,
    7071for doing some-cute-AJAX-related-things-with-Dojo:
    7172
     73ajax.js:
    7274{{{
    73 function validate() {
    74     var fNode = dojo.byId('xForm')
     75function myinit() {
     76    // connect the event with the good handler
     77    var myButton = dojo.byId("xBtn1");
     78    dojo.event.connect(myButton, "onclick", "sendForm");
     79};
     80function sendForm() {
     81    var fNode = dojo.byId('xForm')
    7582    var fParms = dojo.io.encodeForm(fNode)
     83    var myErrorDiv = dojo.byId('errorBox1')
    7684    var bindArgs = {
    7785        url: ".",
    78         mimetype: 'text/json',
     86        mimetype: 'text/plain',
    7987        method: "post",
    8088        preventCache: true,
    8189        transport: "XMLHTTPTransport",
    8290        postContent: fParms,
    83         error: function(type, error){
    84                // Handle errors for the XMLHTTPTransport here.
     91        error: function(type, error, http){
     92               // Handle error here
    8593               alert(error.message)
     94               if (http.responseText)
     95                   // Return the raw server response
     96                   // (useful when debugging)
     97                   document.write(http.responseText)
    8698               return false
    8799        },
    88         load: function(type, data, evt){
    89               // handle successful response here
     100        load: function(type, data, http, kwArgs){
     101              // Handle "successful" responses here
     102              var errStr = ''
    90103              if(type == 'load'){
    91                 var myDiv = dojo.byId('errorBox1')
    92                 // XXX Not sure what to do if the data is JSON or
    93                 // something else..
    94                 var json = dojo.json.evalJson(data)
    95                 if(json){
    96                    errStr = ''
    97                    for(x in json){
    98                      errStr += x + ': ' + json[x] + '<br />'
    99                    }
    100                    myDiv.innerHTML = errStr
    101                 }else{
    102                    myDiv.innerHTML = "hello, world!"
    103               }}
    104        }}
    105        var xmlhttp = dojo.io.bind(bindArgs)
    106        return xmlhttp
    107 }
     104                try {
     105                 var json = eval( '(' + data + ')' )
     106                } catch (e) {
     107                  // not json
     108                  document.write(data)
     109                  return false
     110                }
     111                for (x in json)
     112                    errStr += x + ': ' + json[x] + '<br />'
     113                myErrorDiv.innerHTML = errStr
     114              }
     115         }
     116    };
     117    var xmlhttp = dojo.io.bind(bindArgs)
     118    return xmlhttp
     119};
     120dojo.addOnLoad(myinit);
    108121}}}
    109122
Back to Top