p:dialog in composite component JS error: Uncaught TypeError: Cannot read property 'show' of undefined

Question

我正在尝试创建一个要在我的 JSF 2.2 页面中使用的复合组件。这是复合材料：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui"
            xmlns:cc="http://java.sun.com/jsf/composite">

<cc:interface componentType="searchUser">
    <!-- Define component attributes here -->
    <cc:attribute name="update" type="java.lang.String"
                  shortDescription="the component to update"/>
    <cc:attribute name="widgetVar" type="java.lang.String"/>
</cc:interface>

<cc:implementation>
    <p:dialog header="Search for User"
              widgetVar="#{cc.widgetVar}"
              modal="true"
              id="searchDialog"
            >

        <p:panelGrid columns="2" id="searchPanel">
            <p:outputLabel value="First Name: "
                           for="firstname"
                    />
            <p:inputText id="firstname" value="#{SearchBean.firstname}"/>

            <p:outputLabel value="Last Name: "
                           for="lastname"
                    />
            <p:inputText id="lastname" value="#{SearchBean.lastname}"/>

            <p:commandButton value="search"/>

            <p:dataTable value="#{SearchBean.results}" var="user">
                <p:column headerText="First Name">
                    #{user.firstName}
                </p:column>
                <p:column headerText="Last Name">
                    #{user.lastName}
                </p:column>
                <p:column headerText="E-Mail">
                    #{user.email}
                </p:column>
            </p:dataTable>
        </p:panelGrid>
    </p:dialog>
</cc:implementation>

我正在使用它：

 <my:searchUser update="foo" id="searchDLG" widgetVar="sdgl"/>
 <p:commandButton onclick="PF('sdgl').show();" type="button" value="search for user" />

目前我的 FacesComponent Java 是空的：

@FacesComponent("searchUser")
public class searchUser extends UIInput implements NamingContainer {

}

目标是创建一个搜索表单/对话框，我可以在多个位置使用它。

我的问题是，在点击时出现错误：Uncaught TypeError: Cannot read property 'show' of undefined。

任何关于我遗漏的建议都将不胜感激。

Answer 1

这不是引用复合属性的正确方法。

<p:dialog widgetVar="#{cc.widgetVar}">

它基本上引用了支持组件本身的属性。

#{cc.attrs} 地图提供复合属性。

<p:dialog widgetVar="#{cc.attrs.widgetVar}">

JS 错误是因为实际的 widgetVar 值是空的，而 PF('sdgl') returned undefined 然后你盲目地尝试调用show() 函数。它基本上就像 Java 中的 NullPointerException。

另请参阅：

与具体问题无关，此组合还有 2 个其他问题：

支持组件 return 没有 UINamingContainer.COMPONENT_FAMILY 所需的组件系列。您可以通过从 UINamingContainer 而不是 UIInput 扩展来修复它，或者通过将 getFamily() 方法重写为 return UINamingContainer.COMPONENT_FAMILY.
这不是复合组件的正确用途。根本没有单一的模型值。 IE。您没有与现有标准组件类似的 <my:searchUser value="...">。而是使用包含或标记文件。另请参阅 When to use <ui:include>, tag files, composite components and/or custom components? 否则，请重新处理复合材料，以便您最终可以使用 <my:searchUser value="#{bean.foundUser}">。

p:dialog in composite component JS error: Uncaught TypeError: Cannot read property 'show' of undefined

p:dialog in composite component JS error: Uncaught TypeError: Cannot read property 'show' of undefined

jsf

dialog

typeerror

primefaces

composite-component

另请参阅：