Question

我要求在我的JSF页面中会有一个commandButton，并且在点击该commandButton时它将触发一个动作方法，该方法将执行一些逻辑并根据该逻辑的结果我将要显示一个弹出窗口用两个commandButton就可以了。我不能使用JSF的任何实现（如RichFaces，IceFaces），我需要使用JSF 2和JQuery来实现这一点。可能吗？任何想法或想法对我都非常有帮助。哦，另外一件事我需要在几个页面中添加按钮和相同的逻辑。我尝试过使用SimepleModal插件但是没有成功提出一种智能方法。

Answer 1

这是一个完整的工作示例

我使用display:none来隐藏h:panelGroup对话框容器，因为.dialog函数会在需要时显示它

你也可以隐藏真正的jsf命令按钮，并通过jquery＃selector通过对话框按钮访问它，并像调用js文件一样调用.click。

最后一件事，使用onclick="initDialog(); return false;"来调用对话框js函数并添加了返回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");
            }
     },
 });
}

就是这样

如何使用JQuery在JSF 2中打开Modal弹出窗口

1 个答案: