事件发生时动态显示 panelGroup (JSF/ICEFACES)答案

【问题标题】：Dynamically show a panelGroup when an event happens (JSF/ICEFACES)事件发生时动态显示 panelGroup (JSF/ICEFACES)
【发布时间】：2012-05-29 05:43:21
【问题描述】：

我想动态显示一个 panelGroup。

在这段代码中，我有可以填充的框。当最后一个可用的框被数据填满时，应该会出现一个带有一组新框的 panelGroup。

<ice:panelGroup binding="#{myPage.boxes0to9}" />
<ice:panelGroup binding="#{myPage.boxes10to19}" />

如何让第二个 panelGroup 仅在 #{myPage.boxes0to9} 中的最后一个框已填满时显示？

谢谢！

【问题讨论】：

您使用的 JSF 和 IceFaces 版本是什么？
@LuiggiMendoza IceFaces 1.8 和 JSF 2.0 :)

标签： java jsf icefaces

【解决方案1】：

您可以通过用 div 包装 <ice:panelGroup> 并通过 javascript 检查显示/隐藏它来实现它：

<script type="text/javascript">
    var arrInputs = new Array(9);
    function checkInputsFulfilled(value, index) {
        arrInputs[index] = (value == "");
        var filled = true;
        for(var i = 0; i < arrInputs.length; i++) {
            if (arrInputs[i]) {
                filled = false;
                break;
            }
        }
        document.getElementById("myDiv").style.display = filled ? "block" : "none";
    }
</script>

<ice:panelGroup binding="#{myPage.boxes0to9}">
    <!-- your 9 inputs (or more) here, I'll write 1 as a sample -->
    <h:inputText value="#{myBean.attribute1}" onchange="checkInputsFulfilled(this.value, 0);" />
</ice:panelGroup>
<div id="myDiv" style="display:none">
    <ice:panelGroup binding="#{myPage.boxes10to19}">
    </ice:panelGroup>
</div>

您也可以使用 ajax 支持并呈现包装第二个 <ice:panelGroup> 的 JSF 组件，但是当您只清空一个起始输入并且该组应该隐藏时，这将产生很大影响。当然，这最后一个行为是在 javascript 中控制的，如果你不想让它修改它:)。

【讨论】：