1

在我的 JSF 页面中，当用户单击“注册” commandLink组件时，我必须在完成注册后在 jQuery 弹出窗口中向用户显示确认消息。

我的 JSF 页面看起来像

<h:commandLink value="Register" p:data-role="button" >
    <f:ajax execute="@form" listener="#{userController.registerUser(event)}" 
            onevent="function(data){if(data.status==='success')
            {
           openDialogFunc();
            }}" />
</h:commandLink>

<div data-role="popup" id="register-dialog" data-theme="a" data-overlay-theme="a">  

    <div data-role="header" data-tap-toggle="false">
        <h1>Success</h1>
    </div>

    <div data-role="content">
        <br/>
        <p>Your user account has now been created.</p>
        <br/>
        <h:commandButton value="Login" p:data-role="button" action="#{userController.Login}"/>
    </div>

</div>

openDialogFunc的定义如下：

function openDialogFunc() {
    $("<a />").attr({
        "href": "#register-dialog",
        "data-rel": "popup",
        "data-position-to": "window",
        "data-theme": "a"
    }).click();

}

当我单击“注册”按钮时，它会注册用户并调用openDialogFunc。但是不显示 jQuery 弹出窗口。我在这里做傻事吗？（我是 Java/Web 世界的新手）。

更新：-根据@BalusC 的建议，我使用了 primefaces（3.5 版）的组件。但是对话框再次没有显示。我只是从陈列柜中找到的样本中复制粘贴。浏览器日志显示错误消息“PF 未定义”。我使用以下代码启动对话框：

<p:commandButton id="basic" value="Basic" onclick="PF('dlg1').show();" type="button" />

这在 3.5 中不起作用。它实际上是一种显示对话框的 4.0 方式。但是使用以下内容也不起作用

<p:commandButton id="basic" value="Basic" onclick="dlg1.show();" type="button" />

无论如何，现在我正在使用 Growl 组件来显示通知。

我可以看到有一个对话框框架，可用于将外部页面从 bean 启动到对话框中。是否可以使用相同的框架来动态启动或进入对话框？

4

1 回答 1

2

Just use a jQuery based JSF component library such as PrimeFaces. It has a <p:dialog> component for the very purpose without the need that you've to write/compose all that HTML/JS boilerplate code every time.

The showcase showcases currently PrimeFaces 4.0 compatible code, here's the PrimeFaces 3.5 compatible markup (note the <p:dialog widgetVar>, this works also in PrimeFaces 4.0, but somehow they preferred to show how to use the new PF() function):

<h:form>
    ...
    <p:commandLink value="Register" action="#{user.register}" oncomplete="w_confirm.show()" />
</h:form>

<p:dialog widgetVar="w_confirm" header="Success">
    <h:form>
        <p>Your user account has now been created.</p>
        <p><p:commandButton value="Login" action="#{user.login}" oncomplete="w_confirm.hide()" /></p>
    </h:form>
</p:dialog>

See also:

于 2013-08-30T12:09:38.503 回答