如何使用 JQuery 在 JSF 2 中打开模态弹出窗口答案

【问题标题】：How to open Modal pop up in JSF 2 using JQuery如何使用 JQuery 在 JSF 2 中打开模态弹出窗口
【发布时间】：2012-03-15 03:04:14
【问题描述】：

我有一个要求，即在我的 JSF 页面中将有一个 commandButton，单击该 commandButton 时，它将触发一个操作方法，该方法将执行一些逻辑，并且基于该逻辑的结果，我将不得不显示一个弹出窗口上面有两个命令按钮。我不能使用 JSF 的任何实现（如 RichFaces、IceFaces），我只需要使用 JSF 2 和 JQuery 来实现这一点。可能吗？任何想法或想法都会对我很有帮助。哦，另一件事我需要在几个页面中添加按钮和相同的逻辑。我曾尝试使用 SimepleModal 插件，但未能成功提出一个聪明的方法。

【问题讨论】：

RichFaces 和 ICEfaces 不是 JSF 实现。它是 JSF 组件库。您需要花费数天/数周的时间来自制几百行代码来实现需求，而不是仅仅为此使用组件库的现成组件，究竟是什么原因？
背后的原因是自己构建逻辑而不是依赖第三方代码。
确实有可能，只是需要做很多工作。您的问题过于开放，无法给出合适的答案。我只能建议查看开源组件库的源代码以通过示例学习。同时，我会重新考虑 JSF 是否真的是您的正确选择：stackoverflow.com/questions/4421839/…

标签： jquery jsf-2

【解决方案1】：

这是一个完整的工作示例

我使用display:none 隐藏h:panelGroup 对话框容器，因为.dialog 函数会在需要时使其可见

您还可以隐藏真正的 jsf 命令按钮，并通过带有 jquery # 选择器的对话框按钮访问它，并像我在 js 文件中那样调用它。

最后一件事，使用 onclick="initDialog(); return false;" 调用对话框 js 函数并添加 return false 以便命令按钮不会尝试导航...

通过使用 jQuery UI 对话框，您将获得最大的灵活性/对对话框的控制。

该示例由 2 个文件（一个 .xhtml 和一个 .js）组成，

我用过 jQuery 和 jQueryUI ，其他插件完全不需要

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
    <h:head>
        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script language="javascript" src="scripts.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    </h:head>
    <h:body>
        <h:panelGroup id="idOfDialogPlaceHolder" style="display:none">
            <h:form prependId="false">
                <h:outputText value="Some Text"></h:outputText>
                <h:commandButton id="justAButton" onclick="alert('wow')" style="display:none"></h:commandButton>
            </h:form>
        </h:panelGroup>
        <h:form prependId="false">
               <h:commandButton id="dialogClickBtn" value="Click to display dialog" onclick="initDialog(); return false;"></h:commandButton>
        </h:form>

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

和scripts.js

function initDialog() {
 $("#idOfDialogPlaceHolder").dialog({
     modal: true,
     buttons: {
            SomeButton: function () {
                $("#justAButton").click();
            },
            Close: function () {
                $(this).dialog("close");
            }
     },
 });
}

就是这样

【讨论】：

没有<h:panelGroup id="idOfDialogPlaceHolder" style="display:none">可以实现这个吗？只需像 java 方法参数一样将消息传递给 javascript？
@PeterPenzov 你的意思是像简单的 js 确认？ w3schools.com/js/tryit.asp?filename=tryjs_confirm，不，你不能，（除非你使用一些第三方 jquery 插件） - 例如 projectshadowlight.org/jquery-easy-confirm-dialog