Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.xhrPost: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 7: | Line 7: | ||
Synntax highlight based on html5: | Synntax highlight based on html5: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<div id="dialog_loginformA" action="http://atajo.biz/test_versions/week15/dss/login.php" method="post" name="forma" | <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-type="dijit.form.Form" | ||
Line 84: | Line 84: | ||
}; | }; | ||
}, | }, | ||
style:'float:right'"> | style:'float:right'">Login</button> | ||
</syntaxhighlight> | |||
And the Javascript part.. | |||
<syntaxhighlight lang="JavaScript"> | <syntaxhighlight lang="JavaScript"> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 137: | Line 137: | ||
var deferred = dojo.xhrPost(defaultxhrArgs); | var deferred = dojo.xhrPost(defaultxhrArgs); | ||
} | } | ||
</script> | |||
</syntaxhighlight> | |||
As above but simplified.. | |||
<syntaxhighlight lang="JavaScript"> | |||
<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> | </script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
===Verified in=== | ===Verified in=== | ||
IE 8, Firefox 3.6.22, Dojo 1.6.1 | IE 8, Firefox 3.6.22, Dojo 1.6.1 |
Latest revision as of 20:07, 27 April 2012
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
Document History
Version | Date | Author | Status | Purpose of update |
---|---|---|---|---|
1 | 14 Apr 2012 | PSA | Draft | Not released. |