8 Replies Latest reply on Dec 2, 2009 6:33 PM by Jeff Haynes

    Ajax onchange Event problem

    Max Meyers Newbie

      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.

        • 1. Re: Ajax onchange Event problem
          Max Meyers Newbie

          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.

          • 2. Re: Ajax onchange Event problem
            Max Meyers Newbie

            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.

            • 3. Re: Ajax onchange Event problem
              Gustavo Alberto Gutierrez Barbeito Newbie

              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

              • 4. Re: Ajax onchange Event problem
                Franco Fernandes Novice

                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

                • 5. Re: Ajax onchange Event problem
                  Gustavo Alberto Gutierrez Barbeito Newbie
                       
                  _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
                  • 6. Re: Ajax onchange Event problem
                    Adam Michalik Newbie

                    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.

                    • 7. Re: Ajax onchange Event problem
                      Adam Michalik Newbie

                      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.

                      • 8. Re: Ajax onchange Event problem
                        Jeff Haynes Newbie

                        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>