f:ajax not working

Question

I have trouble getting f:ajax to work on a h:panelGroup . Here's what i'm doing:

JSF code:

<h:panelGroup id="contacts_tab_contacts_list_list">
    <h:form>
    <ul>
        <c:forEach items="#{currentDevice.contacts}" var="contact">
            <li>
                <f:ajax event="click" onevent="logcheck()">
                    <h:panelGroup layout="block" 
                                styleclass="contacts_tab_contacts_list_quickview_box"  >
                            <h:outputText value="#{contact.firstName} #{contact.familyName}" />
                    </h:panelGroup>
                </f:ajax> 

                <f:ajax event="click" onevent="logcheck()">
                    <f:param value="#{contact.getUUID}" name="currContactUUID" />
                    <h:commandButton value="#{contact.firstName} #{contact.familyName}" 
                    styleclass="contacts_tab_contacts_list_quickview_box" />
                </f:ajax>
            </li>
        </c:forEach>
    </ul>
    </h:form>
</h:panelGroup>

What it looks like on the web page: (Ignore silly formatting :-) )

And finally, what the source of the page looks like:

<li>
    Name - 35 Family - 35
    <input 
        id="j_id594943238_6609edf4:j_id594943238_6609ec58" 
        name="j_id594943238_6609edf4:j_id594943238_6609ec58" 
        type="submit" 
        value="Name - 35 Family - 35" 
        onclick=".. removed .." /> 
</li> 

(Notice how the h:panelgroup was "swallowed" by the li element.)

I can click the h:commandButton and it works properly. Nothing happends when I click the text and it makes sense because, as it seems from looking in the source, the h:panelGroup along with the f:ajax have disappeared!

That's it. Sorry for the length but I wanted to get all the details out. Thanks for the help :-)

Answer 1

did small POC for ajax may be useful for others

This chunk will show that we can call managed bean method and Ajax together and it works using JSF2.0

<h:form>     
  <h:inputText id="comments" value="#{photoManagedBean.name}"></h:inputText>

  <h:commandButton value="Comments Input" >
    <f:ajax execute="comments" listener="#{photoManagedBean.saveComments()}" render="displayRecentComments" />

   </h:commandButton>
   <br/>

   <table width="600" border="0"  height="80">
     <td>
       <h:outputText id="displayRecentComments" value="#{photoManagedBean.name}"/>
     </td>
   </table>
 </h:form>

ManagedBean:

public void saveComments() { //ur code//}

Answer 2

I think the panelGroup will be swallowed since there is only one component inside. Maybe jsf optimizes it.

Then there is only the h:outputText left and this component doesn't implement the javax.faces.component.behavior.ClientBehaviorHolder interface which is required for a component that gets ajax attached.

You could use h:outputLink or maybe h:outputLabel instead.