Add Ajax to created component/Ajax + dynamic component

[brueslymuesh]

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

[nbelaevski]

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?

[brueslymuesh]

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