我试图使用dojo和dijit小部件组合一个相当复杂的表单。表单有多个“部分”,允许用户附加现有对象(通过选择标记)或在表单中内联创建一个全新的对象。
我的输入是基于条件的单选按钮呈现并通过javascript操作。我遇到的问题是有条件地根据输入是否被渲染而需要dijit小部件(这本身取决于选择了哪个单选按钮。
我的HTML(实际上是jsp)
<div>
<input id="useExisting" type="radio" name="radio" checked value="useExisting" onclick="renderExistingInput()" /> <label for="useExisting">Use Existing</label>
<input id="new" type="radio" name="radio" value="new" onclick="renderNewInputs()"/> <label for="new">Create New</label>
</div>
<br>
<div id="newInputs">
<div class="row">
<label class="label" for="newName">Name </label>
<span class="formInput"><input type="text" id="newName" name="newName" required="true" dojoType="dijit.form.ValidationTextBox"/></span>
</div>
<!-- More inputs with required="true"-->
<br>
</div>
<div id="existingInput>
<div class="row">
<label class="label" for="existingSelect">Existing Object </label>
<span class="formInput">
<select name="existingSelect" id="existingSelect" dojoType="dijit.form.Select">
<!--JSTL tags for compiling list of options -->
</select>
</span>
</div>
</div>
伴随javascript函数:
function renderExistingInput() {
dojo.fx.wipeOut(getWipeArguments('newInputs')).play();
dojo.fx.wipeIn(getWipeArguments('existingInput')).play();
}
function renderNewInputs() {
dojo.fx.wipeOut(getWipeArguments('existingInput')).play();
dojo.fx.wipeIn(getWipeArguments('newInputs')).play();
}
function getWipeArguments(id) {
var wipeArgs = {
node : id
};
return wipeArgs;
}
用户互动的基本“流程”是用户点击一个单选按钮,正确的div渲染就是这样。我想要的是那些未被视为不需要的输入。我不完全确定如何做到这一点。是否可以通过dojo直接操作该特定属性?或者有更好的方法完全做到这一点吗?
答案 0 :(得分:1)
function setWidgetRequiredAttributes(baseDomNodeId, requiredValue){
foundWidgets = dijit.findWidgets(dojo.byId(baseDomNodeId));
console.log(foundWidgets);
foundWidgets.forEach(function(widget){
widget.required=requiredValue;
});
}