f:ajax 不工作答案

【问题标题】：f:ajax not workingf:ajax 不工作
【发布时间】：2011-08-31 00:56:42
【问题描述】：

我无法让f:ajax 处理h:panelGroup。这就是我正在做的事情：

JSF 代码：

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

它在网页上的样子：（忽略愚蠢的格式:-)）

最后，页面的来源是什么样的：

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

（注意h:panelgroup 是如何被li 元素“吞噬”的。）

我可以点击h:commandButton，它工作正常。当我单击文本时没有任何反应，这是有道理的，因为从查看源代码看来，h:panelGroup 和 f:ajax 已经消失了！

就是这样。抱歉篇幅太长，但我想了解所有细节。感谢您的帮助:-)

【问题讨论】：

标签： html ajax jsf jsf-2

【解决方案1】：

我认为 panelGroup 会被吞掉，因为里面只有一个组件。也许 jsf 对其进行了优化。

那么剩下的只有h:outputText，而这个component 没有实现附加ajax 的组件所需的javax.faces.component.behavior.ClientBehaviorHolder 接口。

您可以改用h:outputLink 或h:outputLabel。

【讨论】：

Tnx！那么，作为后续，你将如何制作一个可以包含图像和文本的可点击div？（意思是，整个 div 部分都是可点击的，类似于h:commandbutton，但可以更好地控制内容和样式。

【解决方案2】：

ajax 的小型 POC 是否对其他人有用

这个块将表明我们可以一起调用托管 bean 方法和 Ajax，它使用 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>

托管豆：

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

【讨论】：