3 Replies Latest reply on Aug 18, 2010 5:31 AM by Ilya Shaikovsky

    How to use onchange ajax event for rich:comboBox????

    Siva P Master

      In my case i have to show the rich:comboBox 2, if i select ID Type in rich:comboBox 1.If i delete the selected value manually in the combox 1 means have to hide the comboBox2.My event="onchange" is not firing and onblur is also no working for me.How to do this ??Any help me to solve this problem.

       

       

      My jsp page:

       

       

       

      <tr>
      <a4j:region selfRendered="true">                     
      <h:panelGrid columns="5" border="0">
      <h:outputText  value="*" styleClass="mandatory_text" />
      <h:outputText value="#{msg.search}"/>
      <h:outputText value=":" />               
                      <rich:comboBox  id="cbxSearchField" value="#{existingCustomerBean.cbxSearchItem}"
                                selectFirstOnUpdate="false"     listClass="myClass" required="true"
      defaultLabel="#{msg.defaultLabel}"     immediate="true">
      <f:selectItems value="#{listBoxBean.selectSearchList}" />
      <a4j:support  event="onchange" actionListener="#{existingCustomerBean.selectSearchFieldActionListener}"
          limitToList="true" ajaxSingle="true" eventsQueue="fooQueue"
          reRender="panelIDType"/>                                                                  
      </rich:comboBox>              
      </h:panelGrid>
      </a4j:region>
      </tr>
      <tr> 
      <a4j:outputPanel id="panelIDType">
      <a4j:region  rendered="#{existingCustomerBean.renderIDType == 'idtype'}">                
      <h:panelGrid id="panelGridIdType" columns="5" border="0" >
      <h:outputText  id="lblMandatory" value="*" styleClass="mandatory_text" />
      <h:outputText  id="lblIDType" value="#{msg.idType}"/>
      <h:outputText  id="lblColon" value=":" />               
                      <rich:comboBox id="cbxIDTypeField"      selectFirstOnUpdate="false"     listClass="myClass"
      defaultLabel="#{msg.defaultLabel}"     required="true"
      value="#{existingCustomerBean.cbxIDTypeItem}">
      <f:selectItems value="#{listBoxBean.selectIDTypeList}" />
      </rich:comboBox>              
      </h:panelGrid>
      </a4j:region>
      </a4j:outputPanel>
      </tr>

       

       

      My bean:

       

       

       

      public String cbxSearchItem;

      public String cbxIDTypeItem;

      public String renderIDType;

       

       

       

      public void selectSearchFieldActionListener(ActionEvent event)

      {

      log.debug("Calling selectSearchFieldActionListener");

      if(this.getCbxSearchItem().toString()!=null)

      {

      log.debug("selectSearchFieldActionListener-selected Search:"+this.getCbxSearchItem().toString());

      if(this.getCbxSearchItem().equals("ID Type"))

      {

      this.setRenderIDType("idtype");

      log.debug(getRenderIDType());

      }

      else

      {

      this.setRenderIDType("Empty");

      this.setRenderIDType(" ");

      }

      }

       

      }

       

      IDType.bmp

       

       

      Thank you

        • 1. Re: How to use onchange ajax event for rich:comboBox????
          Stephan Quaritsch Newbie

          Hi sivaprasad krishnaswamy,

           

          i have the same (erratic) behaviour in my application .

          When i select or enter a new value, or change a value manually (or by selecting a value) in the comboBox, it works fine. But when i clear the comboBox value by deleting manually the value and leave the field (by pressing the tab for example), then the onchange event ist not fired!

          At the moment i have no possibility to react on such a user action. onblur is no alternative.

           

          We are using facelets and the source section looks like this:

          <ui:composition>
              <a4j:region id="#{id}MyObjectRegion">

          ...

          <td>
              <t:div id="#{id}ObjAttributDiv" >
                  <rich:comboBox value="#{myObject.attribut}" size="3" width="60"
                      maxlength="3" id="#{id}myObjectAttribut" required="#{required}"
                      disabled="#{!suggestAttributEnabled}" converter="emptyLong"
                      directInputSuggestions="true"
                      onkeydown="javascript: isObjAttributKeydown(event, document.getElementById(this.id + 'Value'));"
                      onkeypress="javascript: isObjAttributKeydown(event,document.getElementById(this.id + 'Value'));"
                      tabindex="#{tabIndexP + 2}"
                      onfocus="captureFocus();" >
                     <f:selectItems value="#{actionController.suggestAttributValues}"/>
                     <rich:toolTip
                         styleClass="error-tool-tip" rendered="false"
                         for="#{id}myObjectAttribut">
                         <rich:message for="#{id}myObjectAttribut" />
                     </rich:toolTip>
                     <f:valueChangeListener binding="#{actionController}" />
                     <a4j:support id="#{id}myObjectAttributChangeEvent"
                         event="onchange"
                         onsubmit="if(!ajaxSumbitRequiredWithSaveValue(document.getElementById(this.id + 'comboboxValue'))) return false;"
                         ignoreDupResponses="true"
                         reRender="#{reRender},#{id}ObjAttributDiv,#{id}myObjectNrRegion"
                         ajaxSingle="true"
                         process="#{id}myObjectAttribut"
                         oncomplete="moveCaretFromMyObjectAttributToNextEditableField('#{id}');">
                         <f:actionListener binding="#{actionController}" />
                     </a4j:support>
                  </rich:comboBox>
              </t:div>
          </td>

          ...

              </a4j:region>
          </ui:composition>

           

          Has somebody an idea, what the problem is?

           

          Thanks :-)...

          • 3. Re: How to use onchange ajax event for rich:comboBox????
            Ilya Shaikovsky Master

            b.t.w. onblur called. but if will try to use to create workaround add the code which will check that that events not called both in the same time.