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

      Hi,

       

      Actually two questions:

      1.)

      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.

       

      2.)

       

      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">

             <h:column>

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

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

                                          valueChangeListener="#{uiMappingCreatorForEachBean.valueChanged}"

                                          value="#{uiMappingCreatorForEachBean.currentClassValue}">

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

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

                 </rich:select>

              </h:column>

              <h:column>

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

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

                                              value="#{uiMappingCreatorForEachBean.currentClassValue}" >

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

                      </rich:select>

               </h:column>

         </h:panelGrid>

      </c:forEach>

       

      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"

                                                valueChangeListener="#{uiMappingFormBean.mappingValueChanged}"

                                                value="#{uiMappingFormBean.currentClassValue}">

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

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

                                </rich:select>

             

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