Dojo 1.9 NumberTextBox не работает?

Я пытаюсь заставить Dojo NumberTextBox работать в моем коде, и по какой-то причине пример кода не работает, когда я "перевожу" его на свой сайт. Я взял этот пример кода прямо из документации Dojo 1.9, и он работает:

<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>

Вот мой код JSP, который начинает жизнь как серия страниц JSP. Как вы можете видеть, у меня есть импорт блока require(), и я думаю, что он правильно расположен (он отображается в заголовке HTML-страницы):

<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>

А вот тег HTML INPUT, который генерирует приведенный выше код JSP:

                    <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"/>

Но нет подтверждения. Я могу напечатать что-нибудь в поле формы, и я никогда не получаю сообщение об ошибке, изменение в форматировании или что-либо еще, чтобы указать, что любая проверка выполняется.

Может ли кто-нибудь, кто знает Dojo 1.9, взглянуть на это и (надеюсь) указать, что я делаю неправильно?

Источник

2 ответа

Решение

При настройке Dojo с помощью dojoConfigтогда вы должны поставить dojoConfig конфигурация перед загрузкой dojo.js, В документации вы можете заметить, что они загружены в правильном порядке:

<script>dojoConfig = {async: true, parseOnLoad: true}</script><!-- First -->
<script src='../../_static/js/dojo/dojo.js'></script><!-- Second -->

Но в вашем примере:

<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>

Что происходит, когда Dojo загружается, он проверяет свойства, настроенные в dojoConfig, Но если вы измените порядок, он не будет работать, цитируя документацию Dojo:

Обратите внимание, что dojoConfig определен в блоке скрипта до загрузки dojo.js. Это имеет первостепенное значение - в обратном случае свойства конфигурации будут игнорироваться.

В этом случае, parseOnLoad игнорируется, что означает, что ваше поле ввода никогда не преобразуется в dijit/form/NumberTextBox,

Поэтому я предлагаю разделить ваш код на:

<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 в одну строку, используя djConfig="parseOnLoad:true",

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js" djConfig="parseOnLoad:true"></script>
Источник
Другие вопросы по тегам