f：ajax无法正常工作

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 :-)

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.

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//}