Dojo 1.9 NumberTextBox not working?

Question

Dojo 1.9 NumberTextBox not working?

744 Views Asked by user3120173 At 25 April 2025 at 17:01

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:&#39;Invalid value.&#39;" 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?

Original Q&A

There are 2 best solutions below

Ruslan López On 06 March 2015 at 22:36

You can do the same dojo config in one line by using djConfig="parseOnLoad:true".

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js" djConfig="parseOnLoad:true"></script>

**Dimitri Mestdagh** · Accepted Answer

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>

Dojo 1.9 NumberTextBox not working?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JSP

Related Questions in DOJO

Related Questions in DOJO-1.9

Trending Questions

Popular # Hahtags

Popular Questions