Dojo 1.9 NumberTextBox not working?
Question
I'm trying to get a Dojo NumberTextBox working in my code, and for some reason the example code isn't working when I "transplant" it into my site. I pulled this example code directly from the Dojo 1.9 documentation, and it works:
<html >
<head>
<link rel="stylesheet" href="../../_static/js/dojo/../dijit/themes/claro/claro.css">
<script>dojoConfig = {async: true, parseOnLoad: true}</script>
<script src='../../_static/js/dojo/dojo.js'></script>
<script>
require(["dojo/parser", "dijit/form/NumberTextBox"]);
</script>
</head>
<body class="claro">
<label for="q05">Integer between -20000 to +20000:</label>
<input id="q05" type="text"
data-dojo-type="dijit/form/NumberTextBox"
name= "elevation"
required="true"
value="3000"
data-dojo-props="constraints:{min:-20000,max:20000,places:0},
invalidMessage:'Invalid elevation.'" />
</body>
</html>
Here's my JSP code, which starts life as a series of JSP pages. As you can see, I have the import of the require() block and I think it's correctly placed (it shows up in the head of the HTML page):
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js"></script>
<script src="${pageContext.request.contextPath}/js/mystuff.js"></script>
<script type="text/javascript" >
dojoConfig={async: true, parseOnLoad: true};
require(["dojo/parser", "dijit/form/NumberTextBox"]);
</script>
<form:form id="formInfo" commandName="formInfo" action="${flowExecutionUrl}" enctype="multipart/form-data">
<div id="YIBOtherContainer" style="display:none;"> <%-- hidden to start with --%>
<form:input id="yearsInBusinessOther" path="yearsInBusinessOther"
data-dojo-type="dijit/form/NumberTextBox"
data-dojo-props="constraints:{min:6,max:99,places:0}, invalidMessage:'Invalid value.'" />
<div class="formRow otherIndent">
<form:errors cssClass="formError" path="yearsInBusinessOther" />
</div>
</div>
</form:form>
And here's the HTML INPUT tag that the above JSP code produces:
<input id="yearsInBusinessOther" name="yearsInBusinessOther" data-dojo-props="constraints:{min:6,max:99,places:0}, invalidMessage:'Invalid value.'" data-dojo-type="dijit/form/NumberTextBox" type="text" value="99"/>
But there's no validation. I can type anything into the form field and I never get a error message, change in formatting or anything else to indicate that any validation is firing.
Can someone who knows Dojo 1.9 look at this and (hopefully) point out what I'm doing wrong?
2 answers
solution1
3 ACCPTED 2014-04-11 07:02:02
When configuring Dojo using dojoConfig , then you have to put the dojoConfig configuration before loading dojo.js . At the documentation you can notice that they're loaded in the correct order:
<script>dojoConfig = {async: true, parseOnLoad: true}</script><!-- First -->
<script src='../../_static/js/dojo/dojo.js'></script><!-- Second -->
But in your example:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js"></script><!-- First but should be second! -->
<script type="text/javascript">
dojoConfig={async: true, parseOnLoad: true}; // Second, but should be first!
require(["dojo/parser", "dijit/form/NumberTextBox"]);
</script>
What happens is that when Dojo is loaded, it is checking the properties configured in dojoConfig . But if you reverse the order, then it will not work, quoting the Dojo documentation :
Notice that dojoConfig is defined in a script block before dojo.js is loaded. This is of paramount importance—if reversed, the configuration properties will be ignored.
In this case, parseOnLoad is being ignored which means that your input field is never converted to a dijit/form/NumberTextBox .
So I suggest splitting up your code into:
<script type="text/javascript">
dojoConfig={async: true, parseOnLoad: true};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js"> </script>
<script type="text/javascript">
require(["dojo/parser", "dijit/form/NumberTextBox"]);
</script>
solution2
0 2015-03-06 22:36:34
您可以使用djConfig="parseOnLoad:true"在同一行中执行相同的dojo配置。
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js" djConfig="parseOnLoad:true"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.