组件中的动作侦听器不起作用

Question

JVM 1.8.0_144
JSF 2.2.14 (Mojarra)
PrimeFaces 6.1.4

根本原因是组件中的 p:dialog 没有正确附加到 HTML 主体。

据我所知，此示例应将组件中 ID 为 uspsRecommendedAddressDlg 的表单附加到文档末尾，但它仍保留在外部表单中.在完全充实的版本中，这会阻止执行 commandButton 中的 actionListener。

JSF 主页面。

<!DOCTYPE html>
<html lang="en" 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:my_cc="http://xmlns.jcp.org/jsf/composite/components"
    >
    <h:head>
    </h:head>
    <h:body>

        <p class="center">Test Address Validation</p>

        <p:panel>
            <h:form id="addressForm" name="addressForm" prependId="false">
                <my_cc:bareBones />
            </h:form>
        </p:panel>
    </h:body>
</html>

组件

<?xml version="1.0" encoding="UTF-8"?>
<ui:component
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:cc="http://xmlns.jcp.org/jsf/composite"
    xmlns:p="http://primefaces.org/ui"
>

    <cc:interface name="bareBones" displayName="bareBones" shortDescription="Address Collector">
    </cc:interface>

    <cc:implementation>
        <h1>Content</h1>
        <p:dialog
            id="uspsRecommendedAddressDlg"
            widgetVar="uspsRecommendedAddressDlg"
            modal="true"
            appendTo="@(body)"            
            header="Header"
            position="300, 100"
            closable="false"
        >

            <h:form id="selectAddressDlgForm" prependId="false">
                <p:outputPanel id="selectAddressPanel">

                    <div class="singleRow">
                        <h2>Title</h2>
                    </div>

                </p:outputPanel>
            </h:form>
        </p:dialog>
    </cc:implementation>
</ui:component>

生成的HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
    lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
>
<head id="j_idt2">
    <link type="text/css" rel="stylesheet" href="/my-internal/javax.faces.resource/theme.css.jsf?ln=primefaces-afterwork" />
    <link type="text/css" rel="stylesheet" href="/my-internal/javax.faces.resource/fa/font-awesome.css.jsf?ln=primefaces&amp;v=6.1.4" />
    <link type="text/css" rel="stylesheet" href="/my-internal/javax.faces.resource/components.css.jsf?ln=primefaces&amp;v=6.1.4" />
    <script type="text/javascript" src="/my-internal/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&amp;v=6.1.4"></script>
    <script type="text/javascript" src="/my-internal/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&amp;v=6.1.4"></script>
    <script type="text/javascript" src="/my-internal/javax.faces.resource/core.js.jsf?ln=primefaces&amp;v=6.1.4"></script>
    <script type="text/javascript" src="/my-internal/javax.faces.resource/components.js.jsf?ln=primefaces&amp;v=6.1.4"></script>
    <script type="text/javascript" src="/my-internal/javax.faces.resource/validation/validation.js.jsf?ln=primefaces&amp;v=6.1.4"></script>
    <script type="text/javascript" src="/my-internal/javax.faces.resource/validation/beanvalidation.js.jsf?ln=primefaces&amp;v=6.1.4"></script>
    <script type="text/javascript">if(window.PrimeFaces){PrimeFaces.settings.locale='en';PrimeFaces.settings.validateEmptyFields=true;PrimeFaces.settings.considerEmptyStringNull=false;}</script>
    </head>
<body>

    <p class="center">Test Address Validation</p>
    <div id="j_idt5" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt5">
        <div id="j_idt5_content" class="ui-panel-content ui-widget-content">
            <form
                id="addressForm"
                name="addressForm"
                method="post"
                action="/my-internal/secure/test/test_validate_address.jsf"
                enctype="application/x-www-form-urlencoded"
            >
                <input type="hidden" name="addressForm" value="addressForm"/>

                <h1>Content</h1>
                <div
                    id="j_idt6:uspsRecommendedAddressDlg"
                    class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container"
                >
                    <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top">
                        <span id="j_idt6:uspsRecommendedAddressDlg_title" class="ui-dialog-title">
                            Header
                        </span>
                    </div>
                    <div class="ui-dialog-content ui-widget-content">
                        <form
                            id="j_idt6:selectAddressDlgForm"
                            name="j_idt6:selectAddressDlgForm"
                            method="post"
                            action="/my-internal/secure/test/test_validate_address.jsf"
                            enctype="application/x-www-form-urlencoded"
                        >
                            <input
                                type="hidden"
                                name="j_idt6:selectAddressDlgForm"
                                value="j_idt6:selectAddressDlgForm"
                            />
                            <div
                                id="j_idt6:selectAddressPanel"
                                class="ui-outputpanel ui-widget"
                            >

                                <div class="singleRow">
                                    <h2>Title</h2>
                                </div>
                            </div>
                            <input
                                type="hidden"
                                name="javax.faces.ViewState"
                                id="j_id1:javax.faces.ViewState:0"
                                value="RY8/TyGpwk1TjZgz80VGyp90ZQqVcYGsd1ia0hXXpnQ4yM1H+REDJ4v4DrV9ZRnG56joTlETHstuAyd7vNcFvIaqZ8xF4NiPoV2nrTFqED18vmw5sve/X/v+bo68nYM09X83Bub3ZlxlbH5kiy6x7xds7E2PqBTJlyb+2E/xtzEM8I6RdFA6TFEFpPUrGCayJdwB8X5vdP5QYtbPb5t1FRmNs2Vb5Vzml3+eUQtY7k/tP2YIStJiy5eqi9y+La0SypXZ8gRDmCFGhtHb/Ec/t4H2uOhq7AhEuckLQzZWRX0qubupDgC8Zo4RGiSIWz5a2eZQ8uXN/u7b5mOAdkTFvznyatGLgx81zwXB/Iwfua3dcUI2pI2h1hSVhNb5QgL4PZifpjw17IoqXNDGg05hU7zI8ASrr38LN1eEHFdnsXrMy7CXyfTDs/4yZTCgh6+d09zpyVv/fmLDETY5YD7b9vCA28ewAjxqDk1P5pM6x0cd3IceC2hAf4geGYzAfIU7hUVj60vAI10FVDa+NZn8DszEKzjwO6g6ayBoubUHKwPfKGFAHSAVj/KOHffgmbl1ZzZwvCMeLib1q5eI4B9KYMgDTtXSNKUmiCTXu/DVCsml/oGq4CpsGk2dArmSRr9I"
                                autocomplete="off"
                            />
                        </form>
                    </div>
                </div>
                <script
                    id="j_idt6:uspsRecommendedAddressDlg_s"
                    type="text/javascript"
                >$(function(){PrimeFaces.cw("Dialog","uspsRecommendedAddressDlg_j_idt6",{id:"j_idt6:uspsRecommendedAddressDlg",modal:true,appendTo:"@(body)",position:"300, 100"});});</script>
                <input
                    type="hidden"
                    name="javax.faces.ViewState"
                    id="j_id1:javax.faces.ViewState:1"
                    value="oN5Hq9D5yY/QXngwqRN6EUbyPSNxZT8JOVp7hP++4nfmtIC0DaVJOgIAqw4eiBsumuuLl+Tq7NA7eGp0TCdOAw0Xj8hrAORd2Jcwreg7ubDAYg+qAGqcQMdoyIdGj8uQ50QLGpRavtMLmEr9nfFRz0Ni4YoYFadhYCLUVoX8qL9qwTcexRoODz8dAJ4DUUgJJGf8c0gfTKkvwDaJ0Jj7mM0Ckk4duT3XCbdL8Nvkl307z5QB3d6MLS+plAuh8MnZ0gB3e3X7YZFQjgB9YqRiGefr2ZFS/YYxPGE5a3dttHFFMN0H8sImke0p3xrT1EQD4askBvngO8xodWKlfITMHG0AFKuHpmr2QuYvlLY30ui9kxXwSBBr/slZfCuD1aNk+ZUpvR6F+EnohdqMGDtLCyYL03vQIifvRClPZ7cdreyYTtNlZdSaBnT3kE0I/G5N62ToR2ncVT+qBGNAKa2PzK4gHKonJCHRgSTPv5k6VVmeOrCURgtxvuy9QUvqSpG2y6aOwIBuC+HrMxAjDglIZrRxIEqJG+BcVvML6EGiSLTXJ4X5rZtjQ4oTYoBqnT8KhwhbGPRh/ems9eOT3W67dvn+6Pvnl5C9VWCC8ORYOtiTR5BGu4he5w7Cqz6SUzn+"
                    autocomplete="off"
                />
            </form>
        </div>
    </div>
    <script id="j_idt5_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt5",{id:"j_idt5"});</script>
</body>
</html>

Answer 1

感谢@Kukeltje的支持！

最终的答案是构造组件，使它们没有嵌入式表单。让表单来自周围的 JSF 文档。

组件中的动作侦听器不起作用

Action Listener in component not working

primefaces

jsf-2.2