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:

Indtast venligst din email og password:

   <label for="user" style="display:inline-block;width:100px;">E-mail:</label>
                  
   <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;
                                         }
                                     } " >
                               
 

   <label for="password" style="display:inline-block;width:100px;"> Adgangskode:
   </label>

   <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">
   
   


   <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>

                   
   <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>  

<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>

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.