Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.xhrPost: Difference between revisions
Jump to navigation
Jump to search
(Created page with "__NOTOC__ =={{SUBPAGENAME}}== ==How to use== ==Example implemenataion== Synntax highlight based on html5: <syntaxhighlight lang="html5"> </syntaxhighlight> <syntaxhighlight la...") |
No edit summary |
||
Line 2: | Line 2: | ||
=={{SUBPAGENAME}}== | =={{SUBPAGENAME}}== | ||
In the implementation below a dojo form is used to populate a dojo.xhrPost ajax call. | |||
==Example implemenataion== | ==Example implemenataion== | ||
Line 8: | Line 8: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<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> | |||
<syntaxhighlight lang="JavaScript"> | <syntaxhighlight lang="JavaScript"> |
Revision as of 16:55, 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:
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. |