Ajax onchange Event problem

[maxseam]

Hi!

I have a problem with seam and ajax. First of all I'll show you my code:

<s:decorate id="tcountyField" template="layout/edit.xhtml">
                              <ui:define name="label"> County </ui:define>
                              <rich:inplaceSelect id='countyInput' defaultLabel="#{tuserHome.instance.tdistrict.tregion.tcounty}">
                                   <f:selectItems value="#{tcountyList.resultListAsSelectItem}" />
                                   <a:support event="onchange" reRender="tregionField"/>
                              </rich:inplaceSelect>
                         </s:decorate>
                         <s:decorate id="tregionField" template="layout/edit.xhtml">
                              <ui:define name="label"> District </ui:define>
                              <rich:inplaceSelect id="regionSelect" value="#{tuserHome.instance.tdistrict}" >
                                   <f:selectItems id="Field" value="#{tdistrictList.getDistrictsForCountyAsSelectItem(rich:findComponent('tcountyInput').value)}"/>
                              </rich:inplaceSelect>
                         </s:decorate>

What I want to do is showing the user the available counties and if he clicks on a county the districts which belong to this country should be added to the second inputSelect. Therefore I added an ajax-support tag with onchange as event. Unfortunately it doesn't work. Everytime I select a county nothing else happens. Even if I try to add an action attribute (submit) to the changeevent nothing happens. I controlled the output of the console too, but nothing happens on change.

I tried many things and variants, but I didn't got the changeevent to work. Is it possible to get a changeevent from an inputSelect?

Does anybody of you know what's my mistake?

Thanks!

regards,
max.

[maxseam]

Now I tried a simple alert message on an changeEvent of a rich:inplaceSelect:

<s:decorate id="tcountyField" template="layout/edit.xhtml">
     <ui:define name="label"> County </ui:define>
     <rich:inplaceSelect id='countyInput' defaultLabel="#{tuserHome.instance.tdistrict.tregion.tcounty}">
          <f:selectItems value="#{tcountyList.resultListAsSelectItem}" />
          <a:support id="countyAjax" action="alert ('changed')" event="onchange"/>
     </rich:inplaceSelect>
</s:decorate>

It does not work too. But I think it's a very basic and simple example. Is there a mistake I can't examine? I searched a long time for this issue, but wasn't able to find an answer.

Maybe inplaceSelect doesn't support onchange? I don't thinkt that's the case, but I don't know what I can try next.

Maybe someone has more experience and can tell me what's the problem here?

Thanks!

regards,
max.

[maxseam]

I solved it. I think it's a bug in inplaceSelect, that it doesn't support the event onchange. I got it working with selectOneMenu.

regards,
Christian.

[walternvlpe]

I have now some problem like yours

I have 2 :selectOnes with Ajax Support, One for countries, another one for states, and the third control is one inputText REQUIRED for the district name
When Page reRender the Country selectOne , one warn Error Appear cause district name is REQUIRED, and Ajax didnt do the work, ot means I cant see the states in the second selectOne

Do u know how to solve this??, Does any One can help me??

Hope you can!!!
My best regards

GGB

[francof]

I do not have an example - this is on my todo list

But you can take a look at an example here
http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support&tab=selects

The richfaces demo war is really valuable, I recommend you install to your Eclipse workspace and look at the backing bean code.

I also recommend putting a4j log component on your page for testing.

<a4j:log level="ERROR" popup="false" width="400" height="200"/> 

Good luck guys

Franco

[walternvlpe]

     
_My Ajax onchange Event problem is

When I trigger onchange Event in the first combo(the countries one), It call Ajax support to fill the second combo(the states one), it works perfect only if I dont have more fields in the form,


When I have some fields that are REQUIRED for Hibernate to save, even if I dont want to save the form yet, Hibernate send me an error message(After I trigger onchange Event in the first combo), cause this fields are REQUIRED.

How can I solve this , because I need Country & State changes any time, without fill the other fields.

Regards
GGB

[hattifnat]

It would be great if someone provided a hint on that - I have the same problem.. I'm editing an entity, some of the (text) fields are mandatory. Plus there are two 'dependant selects' (selectOneMenus) - the ones we are talking about here. I'd like the selectOneMenus be updated but without the bean being submitted/validated. Right now the validation stops the selects to be updated when some of the fields are invalid. When the text fields are valid, the solution works fine.

[hattifnat]

Ok, I figured it out - this thread helped me: http://www.seamframework.org/Community/SeamA4JSelectonemenusAndValidationRichMessage. Generally, I surrounded the first (parent) selectOneMenu with a4j:region tag. This causes that during Ajax submission only the region is submitted and not the whole form, so no validation is done. When the whole form is submitted, then the bean gets validated.

[jeff.haynes1]

You can use a4j:support with rich:inplaceSelect by setting event="onviewactivated" and ajaxSingle="true" in the a4j:support tag.  I prefer using ajaxSingle="true" over the a4j:region tag because it looks cleaner in code, it keeps the required behaviour encapsulated in the component(s) that it's applied to, and it's (at least) one less component that needs to exist in the JSF tree.

Here's the modified code example from the first post:

<s:decorate id="tcountyField" template="layout/edit.xhtml">
    <ui:define name="label"> County </ui:define>
    <rich:inplaceSelect id='countyInput' defaultLabel="#{tuserHome.instance.tdistrict.tregion.tcounty}">
        <f:selectItems value="#{tcountyList.resultListAsSelectItem}" />
        <a:support event="onviewactivated" ajaxSingle="true" />
    </rich:inplaceSelect>
</s:decorate>
<s:decorate id="tregionField" template="layout/edit.xhtml">
    <ui:define name="label"> District </ui:define>
    <rich:inplaceSelect id="regionSelect" value="#{tuserHome.instance.tdistrict}" >
        <f:selectItems id="Field" value="#{tdistrictList.getDistrictsForCountyAsSelectItem(rich:findComponent('tcountyInput').value)}"/>
    </rich:inplaceSelect>
</s:decorate>