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

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

sivaprasad9394 Aug 13, 2010 5:27 AM

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(" ");

}

Thank you

1. Re: How to use onchange ajax event for rich:comboBox????

stephanquaritsch Aug 17, 2010 8:36 AM (in response to sivaprasad9394)

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 :-)...
Actions
2. Re: How to use onchange ajax event for rich:comboBox????

ilya_shaikovsky Aug 18, 2010 5:29 AM (in response to stephanquaritsch)

unfortunatelly reproduces even at latest version https://jira.jboss.org/browse/RF-9099
Actions
3. Re: How to use onchange ajax event for rich:comboBox????

ilya_shaikovsky Aug 18, 2010 5:31 AM (in response to ilya_shaikovsky)

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.
Actions

Go to original post