Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.xhrPost

dojo.xhrPost

In the implementation below a dojo form is used to populate a dojo.xhrPost ajax call.

Example implemenataion

Synntax highlight based on html5:

<div id="dialog_loginformA" action="http://atajo.biz/test_versions/week15/dss/login.php" method="post" name="forma"
    data-dojo-type="dijit.form.Form"
    data-dojo-props=" action:'http://atajo.biz/test_versions/week15/dss/login.php', 
                      method:'post'"
    data-dojo-id="formA" >
                      
    <p><strong>Indtast venligst din email og password:</strong><br></p>
    <strong><label for="user" style="display:inline-block;width:100px;">E-mail:</label></strong>
                   
    <input id="dialog_loginuser" type="text" name="username"  
    data-dojo-type="dijit.form.ValidationTextBox" 
    data-dojo-props=" required:true,
                      name:'username',
                      value:'psa@virtualteam.biz',
                                                  missingMessage:'Ooops! Du glemte din e-mail!',
                      regExp:        '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$',
                      invalidMessage:'Ooops! Du e-mail er ikke korrekt!',
                      onKeyUp       : function(e){
                                          if(e.keyCode == dojo.keys.ENTER) {
                                             dijit.byId('dialog_loginpassword').focus();
                                             return true;
                                          } else {
                                             return false;
                                          }
                                      } " >
                                <br> <br>
    <strong><label for="password" style="display:inline-block;width:100px;"> Adgangskode:
    </label></strong>

    <!--  Password  -->
    <input id="dialog_loginpassword" name="password" type="password"
    data-dojo-type="dijit.form.ValidationTextBox"
    data-dojo-props=" required:true,
                      name:'pass', 
                      type:'password',                                 
                      placeHolder:   'Indtast din adgangskode',
                      missingMessage:'Ooops! Du glemte at skrive din Passwrord!',
                      regExp:        '^[0-9a-zA-Z.]{6,30}$',
                      invalidMessage:'Ooops! Minimum 6 tegn!',
                      onKeyUp       : function(e){
                                          if(e.keyCode == dojo.keys.ENTER) {
                                             if ( dijit.byId('dialog_loginformA').validate() ){
                                                                                                        xSendForm();
                                                 };
                                             return true;
                                          } else {
                                             return false;
                                          }
                                      }"                             
    data-dojo-id="dialog_loginpassword">
    
    <br><br>
    <input id="dialog_loginremberme" data-dojo-type="dijit.form.CheckBox" 
      data-dojo-props=" disabled:true, 
                        checked:false 
                         ">
    <label for="remberme">Husk mit login på denne browser</label><br>
                    
    <input type="hidden" name="accion" value="login" 
           data-dojo-type="dijit.form.TextBox"
           data-dojo-props="type:'hidden',
                            name:'accion',
                            value:'login'">
    
    <input type="hidden" name="idCentro" value="1"
           data-dojo-type="dijit.form.TextBox"
           data-dojo-props="type:'hidden',
                            name:'idCentro',
                            value:'1'">
              <button data-dojo-type="dijit.form.Button" 
      data-dojo-props=" type:'button',
                        onClick:function(){ 
                        if ( dijit.byId('dialog_loginformA').validate() ){
                              xSendForm();
                        };
                        }, 
                        style:'float:right'">Login</button>

And the Javascript part..

<script type="text/javascript">
function xSendForm() {
  
        var defaultxhrArgs = {
            form: dojo.byId('dialog_loginformA'),
            url: 'http://atajo.biz/test_versions/week15/dss/login.php?JSON=JSON',
            handleAs: 'json',
            load: function(responseObject, ioArgs){
                    
                    var textBuffer = responseObject.message + '<br>Status: ' +responseObject.status;
                    dojo.byId('dialog_loginerror_pane').innerHTML = textBuffer;
                    
                    if (responseObject.status == 'OK') {
                        setTimeout(function hideDialog(){
                            
                            dojo.byId ('dialog_loginerror_pane').innerHTML = '';
                            dijit.byId('dialog_loginpassword').reset();
                            dijit.byId('dialog_login').hide();
                            return true;
                        }, 1300);
                    } else {
                        dijit.byId('dialog_loginpassword').reset();
                        dijit.byId('dialog_loginpassword').focus();
                    }                           
           },
            error: function(error, ioargs) {
                    var message = '';
                    switch (ioargs.xhr.status) {
                    case 404:
                        message = 'Siden blev ikke fundet!';
                        break;
                    case 500:
                        message = 'Serveren rapporterede en fejl!.';
                        break;
                    case 403:
                        message = 'Din session er timet ud. Log ind igen!';
                        break;
                    default:
                        message = 'Ukendt fejl!.';
                    }         
                    dojo.byId('dialog_loginerror_pane').innerHTML = message;
                    return true;
            }
        }
        //Call the asynchronous xhrPost
        dojo.byId('dialog_loginerror_pane').innerHTML = 'Anmodning sendes...';
        var deferred = dojo.xhrPost(defaultxhrArgs);
}
</script>

As above but simplified..

<script type="text/javascript">
function xSendForm() {
  
        var deferred = new dojo.xhrPost({
            form: dojo.byId('dialog_loginformA'),
            url: 'http://atajo.biz/test_versions/week15/dss/login.php?JSON=JSON',
            handleAs: 'json',
            load: function(responseObject, ioArgs){
            ...
            },
            error: function(error, ioargs) {
            ....
            }
        });
        
}
</script>

Verified in

IE 8, Firefox 3.6.22, Dojo 1.6.1

References

• Help:Magic_words

Document History

Version	Date	Author	Status	Purpose of update
1	14 Apr 2012	PSA	Draft	Not released.