Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.xhrPost
Jump to navigation
Jump to search
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
Document History
Version | Date | Author | Status | Purpose of update |
---|---|---|---|---|
1 | 14 Apr 2012 | PSA | Draft | Not released. |