title: Hiding based on previous combo box choice in xpages?
body: <p>I have 3 comboboxes</p>
  
  <p>Combo1
  Combo2
  Combo3</p>
  
  <p>If Combo1 is blank (no selection) then combo2 is hidden.  If Combo2 is blank then Combo3 is hidden.</p>
  
  <p>If Combo1 is changed, it blanks Combo2, if Combo2 is changed it blanks Combo3.</p>
  
  <p>This is because Combo2 choices are determined by Combo1 and Combo3 choices by Combo2.  This is all working well.</p>
  
  <p>What is happening if I change Combo1 then Combo2 and Combo3 are being blanked just as expected  but Combo3 is not being hidden.   If all I do is change Combo1 again, Combo3 is hidden.   It is almost like I need 2 update events.</p>
  
  <p>Is there any way around this?</p>
  
  <p>Update</p>
  
  <p>The issue seems to be with comboboxes that have computed selection values.  In the sample below, changing the State should cause the ShowRoom scope variable to be "0"   Changing Floor sets it to "1". A Computed Field will show the current value of the scope variable. It appears the onChange event of the State combo box is not being triggered.  If you change the city selection from computed to static values then it works fine.</p>
  
  <pre><code>    Not&amp;#160;Working (Computed&amp;#160;Selections)&lt;xp:table style="width:100%" id="tblSurvey2"&gt;
  
      &lt;xp:tr&gt;
          &lt;xp:td style="width:300px"&gt;
              &lt;xp:label value="*State" style="width:66.0px" styleClass="FieldLabel" id="label1"&gt;
              &lt;/xp:label&gt;
  
          &lt;/xp:td&gt;
          &lt;xp:td style="width:745.0px"&gt;
  
              &lt;xp:comboBox id="comboBoxState2" style="width:173.0px"&gt;
  
  
  
                  &lt;xp:eventHandler event="onchange" submit="true"
                      refreshMode="partial" refreshId="tblSurvey2"&gt;
                      &lt;xp:this.action&gt;&lt;![CDATA[#{javascript:viewScope.put("ShowRoom2","0");}]]&gt;&lt;/xp:this.action&gt;
                  &lt;/xp:eventHandler&gt;
  
  
  
  
  
  
                  &lt;xp:selectItem itemLabel="AL"&gt;&lt;/xp:selectItem&gt;
                  &lt;xp:selectItem itemLabel="CA"&gt;&lt;/xp:selectItem&gt;
                  &lt;xp:selectItem itemLabel="NY"&gt;&lt;/xp:selectItem&gt;
                  &lt;xp:selectItem itemLabel="PA"&gt;&lt;/xp:selectItem&gt;
              &lt;/xp:comboBox&gt;
              State =&amp;#160;
              &lt;xp:text escape="true" id="computedField1"&gt;
                  &lt;xp:this.value&gt;&lt;![CDATA[#{javascript:getComponent("comboBoxState2").getValue()}]]&gt;&lt;/xp:this.value&gt;
              &lt;/xp:text&gt;
              &amp;#160;&amp;#160;&amp;#160;Show Room =&amp;#160;
              &lt;xp:text escape="true" id="computedField4"&gt;
                  &lt;xp:this.value&gt;&lt;![CDATA[#{javascript:viewScope.get("ShowRoom2");}]]&gt;&lt;/xp:this.value&gt;
              &lt;/xp:text&gt;
          &lt;/xp:td&gt;
      &lt;/xp:tr&gt;
      &lt;xp:tr id="tr1"&gt;
  
          &lt;xp:td style="width:300px"&gt;
              &lt;xp:label value="*City" style="width:66.0px" styleClass="FieldLabel" id="label2"&gt;
              &lt;/xp:label&gt;
          &lt;/xp:td&gt;
          &lt;xp:td style="width:785.0px"&gt;
              &lt;xp:comboBox id="comboBoxCity2" style="width:175.0px"&gt;
  
                  &lt;xp:eventHandler event="onclick" submit="true"
                      refreshMode="norefresh" id="eventHandler1"&gt;
                  &lt;/xp:eventHandler&gt;
                  &lt;xp:eventHandler event="onchange" submit="true"
                      refreshMode="partial" refreshId="tblSurvey2" id="eventHandler2"&gt;&lt;/xp:eventHandler&gt;
  
  
  
  
  
  
  
  
  
  
                  &lt;xp:selectItems&gt;
                      &lt;xp:this.value&gt;&lt;![CDATA[#{javascript:new Array(getComponent("comboBoxState2").getValue() + " City1", getComponent("comboBoxState2").getValue() + " City2", getComponent("comboBoxState2").getValue() + " City3");}]]&gt;&lt;/xp:this.value&gt;
                  &lt;/xp:selectItems&gt;
              &lt;/xp:comboBox&gt;
          &lt;/xp:td&gt;
      &lt;/xp:tr&gt;
  
      &lt;xp:tr id="tr2"&gt;
  
          &lt;xp:td style="width:300px"&gt;
              &lt;xp:label value="*Floor" style="width:66.0px" styleClass="FieldLabel" id="label3"&gt;
              &lt;/xp:label&gt;
          &lt;/xp:td&gt;
          &lt;xp:td style="width:745.0px"&gt;
              &lt;xp:comboBox id="comboBoxFloor2" style="width:89.0px"&gt;
  
                  &lt;xp:eventHandler event="onclick" submit="true" refreshMode="norefresh" id="eventHandler5"&gt;
                  &lt;/xp:eventHandler&gt;
                  &lt;xp:eventHandler event="onchange" submit="true"
                      refreshMode="partial" refreshId="tblSurvey2" id="eventHandler7"&gt;
                      &lt;xp:this.action&gt;&lt;![CDATA[#{javascript:viewScope.put("ShowRoom2","1");}]]&gt;&lt;/xp:this.action&gt;
                  &lt;/xp:eventHandler&gt;
  
  
  
  
                  &lt;xp:selectItem itemLabel="Floor1"&gt;&lt;/xp:selectItem&gt;
                  &lt;xp:selectItem itemLabel="Floor2"&gt;&lt;/xp:selectItem&gt;
                  &lt;xp:selectItem itemLabel="Floor3"&gt;&lt;/xp:selectItem&gt;
              &lt;/xp:comboBox&gt;
          &lt;/xp:td&gt;
      &lt;/xp:tr&gt;
      &lt;xp:tr id="tr3"&gt;
          &lt;xp:this.rendered&gt;&lt;![CDATA[#{javascript:viewScope.get("ShowRoom2") == "1";}]]&gt;&lt;/xp:this.rendered&gt;
          &lt;xp:td&gt;
              &lt;xp:label value="*Room" style="width:66.0px" styleClass="FieldLabel" id="label6"&gt;
              &lt;/xp:label&gt;
          &lt;/xp:td&gt;
          &lt;xp:td&gt;
              &lt;xp:comboBox id="comboBoxRoom2" style="width:89.0px"&gt;                   
                  &lt;xp:selectItem itemLabel="A"&gt;&lt;/xp:selectItem&gt;
                  &lt;xp:selectItem itemLabel="B"&gt;&lt;/xp:selectItem&gt;
                  &lt;xp:selectItem itemLabel="C"&gt;&lt;/xp:selectItem&gt;
              &lt;/xp:comboBox&gt;
          &lt;/xp:td&gt;
      &lt;/xp:tr&gt;
    &lt;/xp:table&gt;
  &lt;xp:br&gt;&lt;/xp:br&gt;
  &lt;xp:br&gt;&lt;/xp:br&gt;
  </code></pre>