This is my first time to ask a question here. I'm working on migration a dojo project from version 1.6.2 to version 1.13. The application is implement on PHP with Dojo. I have a problem of using the current application profile. There is a login page which is using a few of dijit widgets as TextBox, ComboBox, etc.
The profile has the layer for login which is generate an optimization javascript as "login.js". When the browser renders the PHP login page it has the following error message as below. it seems it failed to load all dependencies in the right order if I'm thinking right. Could you please help me to point out what is the issue? I think my profile is not up to date. I have tried to set different options in the profile but it didn't work out.
I have posted my application profile and my PHP login page and the error message from the browser below Thanks,
Loc
dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox'
at Object.<anonymous> (login.js:formatted:87)
at Object.map (dojo.js:51)
at Object._instantiate (login.js:formatted:84)
at login.js:formatted:375
at f (dojo.js:116)
at a.extend.then.then.a.then (dojo.js:118)
at Object.parse (login.js:formatted:374)
at dojo.js:47
at l (dojo.js:52)
at n (dojo.js:52)
(anonymous) @ login.js:formatted:379
11:39:39.343 dojo.js:28 TypeError: dijit.byId is not a function
at showDialog ((index):38)
at d (dojo.js:53)
at l (dojo.js:52)
at n (dojo.js:52)
at p (dojo.js:54)
at HTMLDocument.k (dojo.js:54)
The following is my application profile.
dependencies = {
optimize:"closure",
layerOptimize: 'closure',
layers: [
{
name: "login.js",
dependencies: [
"dojo/parser",
"dojo/query",
"dojo/_base.declare",
"dojo/_base.fx",
"dojo._base.lang",
"dijit/form.Button",
"dijit/form.TextBox",
"dijit/form._TextBoxMixin",
"dijit/form._FormValueWidget",
"dijit/form.ValidationTextBox",
"dijit/form.ComboBox"
]
},
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "dojo", "../../dojo"]
]
}
The following is my login PHP page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Application Console</title>
<link rel="stylesheet" type="text/css" href="../../Dojo/dijit/themes/claro/claro.css"/>
<script type="text/javascript">
var dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
isDebug: true,
locale: 'en-us'
};
</script>
<script type="text/javascript" src="../../Dojo/dojo/dojo.js"> </script>
<?php
$login_file='/var/www/xms/Dojo/dojo/login.js';
/* Customized dojo JaveScript for UI optimization */
if (file_exists($login_file)) {
echo '<script type="text/javascript" src="../../Dojo/dojo/login.js"> </script>';
} else {
/* For backward compatibility */
echo '<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
</script>';
}
?>
<script>
dojo.addOnLoad(showDialog);
function showDialog() {
LoginLanding();
dojo.connect( dijit.byId("passwordId"), "onKeyUp", checkForEnterKey );
}
function handleLoginVerifyReply(response, args)
{
document.location.href= "index.php/consoleController";
}
function handleLoginVerifyErrorReply(response, args )
{
var responseText = response.responseText;
var errObj = JSON.parse(responseText);
dojo.byId("msgId").innerHTML = "<b>" + errObj.reason + "</b>";
}
function LoginLanding()
{
dojo.xhrPost({
url: "/index.php/verifyLogin/LoginLanding",
handleAs: "json",
timeout: 6000,
content: {} ,
load : function(response, args) {
if (response.status == 200)
{
handleLoginVerifyReply(response, args);
}
return response;
},
error: function(response,args) {
return response;
}
}
);
}
function verifyLogin() {
var vUsername= dijit.byId("userId").get("value");
var vPassword= dijit.byId("passwordId").get("value");
dojo.xhrPost({
url: "/index.php/verifyLogin/login",
handleAs: "text",
timeout: 60000,
content: { "usernameId" : vUsername, "passwordId" : vPassword } ,
load : function(response, args) {
handleLoginVerifyReply(response, args);
return response;
},
error: function(response,args) {
gUserNameLoggedIn="Unknown";
handleLoginVerifyErrorReply(response, args);
return response;
}
}
);
}
function cancelLogin() {
console.log("calling cancelLogin");
}
function checkForEnterKey(ev)
{
if ( ev.keyCode == dojo.keys.ENTER ) {
verifyLogin();
}
}
</script>
<style type="text/css">
.loginPageIcon {
position: absolute;
left: 0px;
top: 0px;
height: 120px;
width: 100%;
background-color: #ffffff;
}
.loginPageTabContainer {
display:flex;
align-items:center;
justify-content:center;
position: absolute;
left: 0px;
top: 120px;
margin-right: auto ;
background-image: url('/images/slide-bg-3.jpg');
height: 100px;
width: 1920px;
font: normal 20px Open Sans !important;
font-weight: bold;
color: white;
text-align:center;
}
h1.loginH1 {
position: absolute;
margin-left: auto ;
margin-right: auto ;
margin-bottom: auto ;
top: 10px ;
color: black;
}
div.DivLogin {
height: 250px;
width: 400px;
margin-left: auto ;
margin-right: auto ;
margin-top: 150px ;
margin-bottom: auto ;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-color:#679cc7
}
span.loginTitleTxt
{
display: inline-block;
width:100%;
height: 100%;
font: 500 15px Open Sans !important;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-top: 5px ;
}
hr.loginSeperator {
position: relative;
top: 10px;
border-bottom: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}
.loginForm {
position: relative;
display: inline-block;
left: 50%;
top: 20px;
margin-left: -180px;
font: normal 14px Open Sans !important;
width:50%;
}
.loginTable {
display: table;
}
.loginRow {
display: table-row;
}
.loginCellLeft {
display: table-cell;
height: 30px;
padding-right: 40px;
}
.loginCellRight {
display: table-cell;
height: 30px;
width:50px;
}
.loginCellEmpty {
display: table-cell;
height: 10px;
}
.loginMsgLabel {
position: relative;
left: 100%;
margin-left: -200px;
font: normal 14px Open Sans !important;
color: #772222;
width:100%;
}
div.section.header {
margin-left: -20px;
margin-right: -10px;
background-image:url("/images/slide-bg-3.jpg");
background-position-y:-200px;
padding:0!important;
height: 210px;
margin-top:6px
}
div.section.header .container {
display:flex;
align-items:center;
justify-content:center;
height:30%
}
div.section.header h1 {
margin-top:280px;
font: normal 40px Open Sans !important;
font-weight: bold;
color: white;
max-width:90%
}
</style>
</head>
<body id="loginBodyId" class="claro" bgcolor="white" style="font-size:medium;background-size:cover" >
<div class="section header">
<div class="container">
<h1> Login Page </h1>
</div>
</div>
<div class="DivLogin">
<div> <span class="loginTitleTxt"> Login </span> </div>
<hr class="loginSeperator"></hr>
<div class="loginForm">
<div class="loginTable">
<div class="loginRow">
<div class="loginCellLeft">
<label for="userId">Username:</label>
</div>
<div class="loginCellRight">
<input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId" />
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="passwordId">Password:</label>
</div>
<div class="loginCellRight">
<input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="passwordId"/>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="domainId">Domain:</label>
</div>
<div class="loginCellRight">
<select id="domainId" autocomplete="true" dojoType="dijit.form.ComboBox" value="Default">
<option selected="selected">default</option>
</select>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
</div>
<div class="loginCellRight">
<button dojoType="dijit.form.Button" onClick="verifyLogin()">Login</button>
</div>
</div>
<div class="loginRow">
<div class="loginCellEmpty">
</div>
</div>
</div> <!-- End loginTable -->
<label class="loginMsgLabel" id="msgId"></label>
</div> <!-- End loginForm -->
</div>
</body>
</html>
Thanks
Loc
