时间戳

首页 > 解决方案 > 如何在运行时更改 Orbeon 表单的控件可见性？

javascript - 如何在运行时更改 Orbeon 表单的控件可见性？

问题描述

我正在尝试找出如何在运行时更改 Orbeon 表单的文本框的控件可见性。在以下示例中，我创建了一个图像按钮 - 当用户单击此按钮时，我希望显示/隐藏另一个按钮，但不幸的是我的代码无法正常工作：

<xf:trigger> 
                            <xf:label>
                                <xf:output value="concat('&lt;img src=''http://**********:8081/green-light.png', image, '''&gt;')"
                                           mediatype="text/html"/>
                            </xf:label> 
                            <xxf:script event="DOMActivate">
                              var remarksControl = ORBEON.jQuery('*[id $= "remarks-control"]')[0];
                                remarksControl.hidden= true;
                            </xxf:script>  
                        </xf:trigger> 

                        </fr:c>
                    <fr:c y="1" x="7" w="6">

                    </fr:c>
                    <fr:c x="1" y="2" w="6">
                        <xf:input id="remarks-control" bind="remarks-bind">
                            <xf:label ref="$form-resources/remarks/label"/>
                            <xf:hint ref="$form-resources/remarks/hint"/>
                            <xf:alert ref="$fr-resources/detail/labels/alert"/>                                                                                                                                              
                        </xf:input>
                    </fr:c>

实现这种功能的最佳方法是什么？我实际上想要实现的是拥有一个包含多个图像的表单，并且用户在单击图像时将能够激活/停用表单上的多个文本字段。

提前致谢

标签： javascriptruntimeorbeon

解决方案

我会尽量避免使用 JavaScript 来处理这样的情况。按钮绑定到一个元素，就像任何其他控件一样。因此，您编写了一些 XForms 来存储一个值，例如show-textfield，当单击按钮时。假设您的按钮已命名button，您可以使用以下自定义模型来执行此操作：

<xf:model xmlns:xf="http://www.w3.org/2002/xforms">

    <xf:action
        observer="button-control"
        event="DOMActivate">
        <xf:setvalue ref="event('xxf:binding')">show-textfield</xf:setvalue>
    </xf:action>

</xf:model>

然后，您希望在单击按钮时显示的控件可以具有 Visibility 公式$button = 'show-textfield'。结果，您将得到如下结果：

单击按钮显示文本字段

推荐阅读