使用 Ajax 更新组件导致异常答案

【问题标题】：Update component with Ajax results in Exception使用 Ajax 更新组件导致异常
【发布时间】：2012-10-25 10:56:32
【问题描述】：

似乎我根本无法理解使用 Ajax 更新组件的工作原理。我不断收到异常“找不到标识符为“：menu-item-container”的组件，引用自“j_idt12:0:j_idt16:j_idt76”。”

这是我的代码：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
    <h:head>
        <title><ui:insert name="pageTitle"></ui:insert></title>
    </h:head>

    <h:body>
        <h:outputStylesheet library="css" name="style.css" />
        <div class="menu-navigation">
            <ul>
                <li>Menu</li>
                <ui:repeat var="category"
                    value="#{restaurantsBean.restaurant.categories}">
                    <h:form>
                        <li><p:commandLink update=":menu-item-container">
                                <div>
                                    #{category.name}
                                    <f:setPropertyActionListener              value="#{category.id}"
                                        target="#                   {restaurantMenuBean.selected}" />
                                </div>
                            </p:commandLink></li>
                    </h:form>
                </ui:repeat>
            </ul>
        </div>

        <div id="menu-item-container">

            <ui:repeat var="category"
                value="#{restaurantsBean.restaurant.categories}">
                <p:outputPanel>
                    <h:panelGroup id="pangroup" layout="block"
                        rendered="#{restaurantMenuBean.active(category.id)}">
                        <div class="some-heading">
                            <h2>#{category.name}</h2>
                        </div>
                        <div class="category-description">#{category.description}</div>

                        <ui:repeat var="item" value="#{category.items}">
                            <p:outputPanel
                                rendered="#{restaurantMenuBean.needLightbox(item)}">
                                <ui:include src="/lightbox-item.xhtml"></ui:include>
                            </p:outputPanel>
                            <p:outputPanel
                                rendered="#{!restaurantMenuBean.needLightbox(item)}">
                                <ui:include src="/nolightbox-item.xhtml"></ui:include>
                            </p:outputPanel>
                        </ui:repeat>

                    </h:panelGroup>
                </p:outputPanel>
            </ui:repeat>

        </div>
    </h:body>
    </f:view>
    </html>

这是 html 源输出的相关区域，它告诉我，我的“menu-item-container”就在根目录下，更新属性只需要在其 id 前面有一个分隔标记“：”。

<div id="menu-item-container"><span id="j_idt17:0:j_idt64"></span><span id="j_idt17:1:j_idt64"><div id="j_idt17:1:pangroup">
                        <div class="some-heading">

【问题讨论】：

标签： ajax jsf-2 primefaces

【解决方案1】：

使用UIViewRoot#findComponent() 中描述的算法解决待更新的组件。很明显，它只能找到完全有价值的 JSF 组件。

但是，您的 menu-item-container 是纯 HTML <div> 元素，因此在 JSF 组件树中不可用。

用一个完整的 JSF 组件替换它。

<h:panelGroup id="menu-item-container" layout="block">

<h:panelGroup> 默认呈现<span>，layout="block" 将其转换为<div>。

【讨论】：

是的，老实说，我读了几次算法的描述，而事实上，它可以找到 JSF 组件对我来说只是远非显而易见...哎呀再次.为了结束这一切，我不得不问：替换我不想单独更新的 html 元素是否有意义？
好的，如果您已经对一般的 Web 开发基础知识（服务器端与客户端等）有所熟悉，JSF 可能会更好地理解。尝试将 JSF 视为 HTML 代码生成器。 JSF 在网络服务器上运行，生成 HTML 并将其发送到网络浏览器。这可能有助于更好地理解这些概念。至于用 JSF 组件替换所有纯 HTML，不，如果您不需要它的 JSF 组件表示来使用它来做任何 JSF 魔术，那就没有必要了。保持纯 HTML 会更便宜。
一定是个菜鸟... :D 再次感谢您的不断建议。 :)