2 Replies Latest reply on Jun 6, 2011 11:26 AM by Richter Nava

    Add Ajax to created component/Ajax + dynamic component

    Richter Nava Newbie



      Actually two questions:


      I have a bean that creates components and adds them to the view (this actually works fine). One item is a HtmlSelectOneMenu item. Is it possible to add ajax functionality to this component (like the a4j:ajax tag in the xhtml files)?


      My guess is that I add an instance of the class: org.ajax4jsf.component.behavior.AjaxBehavior; but I can't get it to work. I have to add this instance via mycomponent.addClientBehavior(eventname, behaviour), right? Basically I'm trying to reproduce the functionality of: http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=ajax&skin=blueSky with dynamic components.


      First I tried it without the aj4:ajax-Tag and I added an onchange="submit()" to the HtmlSelectOneMenu-Tag. This works great, but as soon as I add the h:head-Tag to my xhtml, the site gets reloaded with every change (and the event is not called), that is not what I'm looking for.




      If I create components (rich:select) within a c:forEach loop, how can I reference to my created IDs for the elements?


      <c:forEach var="value" items="#{uiMappingCreatorForEachBean.valueList}">

         <h:panelGrid columns="3">


                 <rich:select id="#{uiMappingCreatorForEachBean.generateClassID}"

                                          enableManualInput="true" defaultLabel="start typing for select"



                     <f:selectItems value="#{uiMappingCreatorForEachBean.classList}" />

                      <a4j:ajax event="change" render="#{uiMappingCreatorForEachBean.generateFullPropertyID}" execute="this@" />




                      <rich:select id="#{uiMappingCreatorForEachBean.generatePropertyID}"

                                              enableManualInput="true" defaultLabel="start typing for select"

                                              value="#{uiMappingCreatorForEachBean.currentClassValue}" >

                           <f:selectItems value="#{uiMappingCreatorForEachBean.propertyList}" />






      The listener works and I get the valueChanged-Event but the column doesn't get renderd. I thought maybe I got an ID wrong, but I called the function from the valueChanged function and I could retrieve the component (UISelect). So it seems that the Ajax-Request is not working for dynamically created IDs. Is this correct or did I miss something?


      Thank you

        • 1. Re: Add Ajax to created component/Ajax + dynamic component
          Nick Belaevski Master

          Hi Richter,


          Can you please explain what exactly is not working: ajax request not fired, listener not invoked, etc?


          Check that generateFullPropertyID and generatePropertyID methods are in sync. BTW, why do you use h:column inside h:panelGrid - it's only for data table-based components, but not for grids like panel grid?

          • 2. Re: Add Ajax to created component/Ajax + dynamic component
            Richter Nava Newbie

            first I thought that the ajax request not fired, but maybe I got that wrong (it was late). Right now it seems like the listener doesn't get invoked at all.


            I got this tag in a for-each loop


            <rich:select id="#{uiMappingFormBean.generateClassID}"

                                                enableManualInput="true" defaultLabel="start typing for select"



                                    <f:selectItems value="#{uiMappingFormBean.mappingValuesString}" />

                                    <a4j:ajax event="change" execute="this@" />



            Everything works fine (display, id...) but the listener doesn't get invoked (yes there is no render attribute in a4j:ajax anymore, I'm just trying the first step now...). As as i delete the attribute id="#{uiMappingFormBean.generateClassID}" the listener does get invoked. Is there anything that I can do about it.


            I tried to add the rich:select (without the ID-attribute) to a panel and set the ID there. This seems to work fine and I can probably retrieve the ID from the rich:select through the getter.


            I'm just wondering why the listener doesn't get called with the dynamic ID...