xpages - 根据 xpages 中先前的组合框选择隐藏？

Question

我有 3 个组合框

组合1 组合2 组合3

如果 Combo1 为空白（无选择），则隐藏 combo2。如果 Combo2 为空白，则 Combo3 被隐藏。

如果 Combo1 更改，则 Combo2 空白，如果 Combo2 更改，则 Combo3 空白。

这是因为 Combo2 的选择由 Combo1 决定，而 Combo3 的选择由 Combo2 决定。这一切都运作良好。

如果我更改 Combo1 会发生什么，然后 Combo2 和 Combo3 就像预期的那样被空白，但 Combo3 没有被隐藏。如果我所做的只是再次更改 Combo1，则 Combo3 将被隐藏。这几乎就像我需要 2 个更新事件。

有没有办法解决？

更新

问题似乎在于具有计算选择值的组合框。在下面的示例中，更改 State 会导致 ShowRoom 范围变量为“0”，而更改楼层则将其设置为“1”。计算字段将显示范围变量的当前值。似乎没有触发 State 组合框的 onChange 事件。如果您将城市选择从计算值更改为静态值，那么它可以正常工作。

    Not&#160;Working (Computed&#160;Selections)<xp:table style="width:100%" id="tblSurvey2">

    <xp:tr>
        <xp:td style="width:300px">
            <xp:label value="*State" style="width:66.0px" styleClass="FieldLabel" id="label1">
            </xp:label>

        </xp:td>
        <xp:td style="width:745.0px">

            <xp:comboBox id="comboBoxState2" style="width:173.0px">



                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.put("ShowRoom2","0");}]]></xp:this.action>
                </xp:eventHandler>






                <xp:selectItem itemLabel="AL"></xp:selectItem>
                <xp:selectItem itemLabel="CA"></xp:selectItem>
                <xp:selectItem itemLabel="NY"></xp:selectItem>
                <xp:selectItem itemLabel="PA"></xp:selectItem>
            </xp:comboBox>
            State =&#160;
            <xp:text escape="true" id="computedField1">
                <xp:this.value><![CDATA[#{javascript:getComponent("comboBoxState2").getValue()}]]></xp:this.value>
            </xp:text>
            &#160;&#160;&#160;Show Room =&#160;
            <xp:text escape="true" id="computedField4">
                <xp:this.value><![CDATA[#{javascript:viewScope.get("ShowRoom2");}]]></xp:this.value>
            </xp:text>
        </xp:td>
    </xp:tr>
    <xp:tr id="tr1">

        <xp:td style="width:300px">
            <xp:label value="*City" style="width:66.0px" styleClass="FieldLabel" id="label2">
            </xp:label>
        </xp:td>
        <xp:td style="width:785.0px">
            <xp:comboBox id="comboBoxCity2" style="width:175.0px">

                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="norefresh" id="eventHandler1">
                </xp:eventHandler>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2" id="eventHandler2"></xp:eventHandler>










                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:new Array(getComponent("comboBoxState2").getValue() + " City1", getComponent("comboBoxState2").getValue() + " City2", getComponent("comboBoxState2").getValue() + " City3");}]]></xp:this.value>
                </xp:selectItems>
            </xp:comboBox>
        </xp:td>
    </xp:tr>

    <xp:tr id="tr2">

        <xp:td style="width:300px">
            <xp:label value="*Floor" style="width:66.0px" styleClass="FieldLabel" id="label3">
            </xp:label>
        </xp:td>
        <xp:td style="width:745.0px">
            <xp:comboBox id="comboBoxFloor2" style="width:89.0px">

                <xp:eventHandler event="onclick" submit="true" refreshMode="norefresh" id="eventHandler5">
                </xp:eventHandler>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2" id="eventHandler7">
                    <xp:this.action><![CDATA[#{javascript:viewScope.put("ShowRoom2","1");}]]></xp:this.action>
                </xp:eventHandler>




                <xp:selectItem itemLabel="Floor1"></xp:selectItem>
                <xp:selectItem itemLabel="Floor2"></xp:selectItem>
                <xp:selectItem itemLabel="Floor3"></xp:selectItem>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
    <xp:tr id="tr3">
        <xp:this.rendered><![CDATA[#{javascript:viewScope.get("ShowRoom2") == "1";}]]></xp:this.rendered>
        <xp:td>
            <xp:label value="*Room" style="width:66.0px" styleClass="FieldLabel" id="label6">
            </xp:label>
        </xp:td>
        <xp:td>
            <xp:comboBox id="comboBoxRoom2" style="width:89.0px">                   
                <xp:selectItem itemLabel="A"></xp:selectItem>
                <xp:selectItem itemLabel="B"></xp:selectItem>
                <xp:selectItem itemLabel="C"></xp:selectItem>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
  </xp:table>
<xp:br></xp:br>
<xp:br></xp:br>

Answer 1

我想你正在使用部分刷新来做到这一点？所以你有了

C1 -> C2/C3
C2 -> C3

由于您只能有一个部分刷新目标，因此您需要将 C2/C3 包装到一个面板中，并将该目标设置为 C1 的部分刷新。还要检查你如何隐藏 C3。您可能希望使用 viewScope 变量来管理状态并将您的可见性依赖于该变量。

更新：您应该将字段绑定到 viewScope 变量，而不是设置额外的值。另外：当绑定变量值丢失或与第一个值不匹配时，组合框会显示，但不反映它。因此，在组合框中，您总是需要有一个有意义的第一个值“-请选择|-”是常见的或查找实际的第一个值。在您的情况下，“请选择”是有道理的。您还可以考虑是否真的要隐藏字段（这将成为“神秘肉”导航）或只是更新可能的选择（从下面的示例中删除呈现的属性以查看其工作原理）。

干得好：

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:table style="width:100%" id="tblSurvey2">
    <xp:tr>
        <xp:td style="width:300px">
            <xp:label value="*State" style="width:66.0px"
                styleClass="FieldLabel" id="label1">
            </xp:label>
        </xp:td>
        <xp:td style="width:745.0px">
            <xp:comboBox id="comboBoxState2" style="width:173.0px"
                value="#{viewScope.selectedState}">
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2" id="eventHandler2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.selectedCity = "-";
viewScope.selectedFloor = "-";
       viewScope.selectedRoom = "-";}]]></xp:this.action>
                </xp:eventHandler>
                <xp:selectItem itemLabel="-Please select-"
                    itemValue="-" id="selectItem1">
                </xp:selectItem>
                <xp:selectItem itemLabel="AL" itemValue="AL" id="selectItem2"></xp:selectItem>
                <xp:selectItem itemLabel="CA" itemValue="CA" id="selectItem3"></xp:selectItem>
                <xp:selectItem itemLabel="NY" itemValue="NY" id="selectItem4"></xp:selectItem>
                <xp:selectItem itemLabel="PA" itemValue="PA" id="selectItem5"></xp:selectItem>
            </xp:comboBox>

        </xp:td>
    </xp:tr>
    <xp:tr id="tr1" style="background-color:rgb(253,250,227)">
        <xp:this.rendered><![CDATA[#{javascript:viewScope.selectedState && (viewScope.selectedState != "-")}]]></xp:this.rendered>
        <xp:td style="width:300px">
            <xp:label value="*City" styleClass="FieldLabel"
                id="label2">
            </xp:label>
        </xp:td>
        <xp:td style="width:785.0px">
            <xp:comboBox id="comboBoxCity2"
                value="#{viewScope.selectedCity}">
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" id="eventHandler1" refreshId="tblSurvey2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.selectedFloor = "-";
  viewScope.selectedRoom = "-";}]]></xp:this.action>
                </xp:eventHandler>
                <xp:selectItems id="selectItems1">
                    <xp:this.value><![CDATA[#{javascript:var hasState = viewScope.selectedState && (viewScope.selectedState != "-");
 var result = ["-Please select-|-"];
 var cities = viewScope.selectedState + " " + ["City1","City2","City3"];
 for (var x in cities) {
result.push(cities[x]);
 };
 return hasState ? result : "Please select a state first|-"; 
 }]]></xp:this.value>
                </xp:selectItems>
            </xp:comboBox>
        </xp:td>
    </xp:tr>

    <xp:tr id="tr2">

        <xp:this.rendered><![CDATA[#{javascript:viewScope.selectedCity && (viewScope.selectedCity != "-")}]]></xp:this.rendered>
        <xp:td style="width:300px">
            <xp:label value="*Floor" style="width:66.0px"
                styleClass="FieldLabel" id="label3">
            </xp:label>
        </xp:td>
        <xp:td style="width:745.0px">
            <xp:comboBox id="comboBoxFloor2"
                value="#{viewScope.selectedFloor}">

                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" id="eventHandler5" refreshId="tblSurvey2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.selectedRoom = "-";}]]></xp:this.action>
                </xp:eventHandler>
                <xp:selectItems id="selectItems2">
                    <xp:this.value><![CDATA[#{javascript:var hasCity = viewScope.selectedCity && (viewScope.selectedCity != "-");
  var result = ["-Please select-|-"];
  var floors = viewScope.selectedCity + " " + ["Floor1","Floor2","Floor3"];
  for (var x in floors) {
result.push(floors[x]);
  };
  return hasCity ? result : "Please select a city first|-"; 
  }]]></xp:this.value>
                </xp:selectItems>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
    <xp:tr id="tr3" style="background-color:rgb(253,250,227)">

        <xp:this.rendered><![CDATA[#{javascript:viewScope.selectedFloor && (viewScope.selectedFloor != "-")}]]></xp:this.rendered>
        <xp:td>
            <xp:label value="*Room" style="width:66.0px"
                styleClass="FieldLabel" id="label6">
            </xp:label>
        </xp:td>
        <xp:td>
            <xp:comboBox id="comboBoxRoom2"
                value="#{viewScope.selectedRoom}">
                <xp:selectItems id="selectItems3">
                    <xp:this.value><![CDATA[#{javascript:var hasFloor = viewScope.selectedFloor && (viewScope.selectedFloor != "-");
    var result = ["-Please select-|-"];
    var rooms = viewScope.selectedFloor + " " + ["Room A","Room B","Room C"];
    for (var x in rooms) {
    result.push(rooms[x]);
  };
   return hasFloor ? result : "Please select a floor first|-"; }]]></xp:this.value>
                </xp:selectItems>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="computedField4" id="eventHandler3">
                </xp:eventHandler>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>Current variables</xp:td>
        <xp:td>State:
<xp:text escape="true" id="computedField1" value="#{viewScope.selectedState}">
</xp:text>
<xp:br></xp:br>
City:
<xp:text escape="true" id="computedField2" value="#{viewScope.selectedCity}">
</xp:text>
<xp:br></xp:br>
Floor:
<xp:text escape="true" id="computedField3" value="#{viewScope.selectedFloor}">

</xp:text>
<xp:br></xp:br>Room:
<xp:text escape="true" id="computedField4" value="#{viewScope.selectedRoom}">
    </xp:text></xp:td></xp:tr></xp:table></xp:view>

您可以通过将“请选择”移动到它自己的值项中来简化代码，并使用一个函数而不是重复代码，但您明白了。

Answer 2

您可以使用一些 javascript 执行多个部分更新。看看这个：

http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_events_and_partial_or_full_refresh