如何使用JQuery在JSF 2中打开Modal弹出窗口 [英] How to open Modal pop up in JSF 2 using JQuery
问题描述
我有一个要求，即在我的JSF页面中将有一个commandButton，并在单击该CommandButton时将触发一个操作方法，该方法将执行一些逻辑，并根据该逻辑的结果，我必须显示一个弹出窗口上面有两个commandButton.我不能使用JSF的任何实现(例如RichFaces，IceFaces)，我只需要使用JSF 2和JQuery来实现.是否有可能?任何想法或想法都会对我有很大的帮助.哦，另一件事，我需要在几页中添加按钮和相同的逻辑.我曾尝试使用SimepleModal插件，但没有成功提出一种聪明的方法.
I have a requirement that in my JSF page there will be a commandButton, and on clicking that commandButton it will fire a action method which will perform some logic and based on the outcome of that logic I will have to show a pop up with two commandButton on it. I can can not use any implementation of JSF (like RichFaces, IceFaces), I need to achieve this only using JSF 2 and JQuery. Is it possible? Any ideas or thoughts will be very helpful to me. Oh another thing I need to add the button and the same logic in several pages. I have tried using the SimepleModal plug in but was not successful to come up with a smart approach.
推荐答案
这是一个完整的工作示例
Here's a complete working example
我使用display:none来隐藏h:panelGroup对话框容器，因为.dialog函数在需要时将其显示为
I used display:none to hide the h:panelGroup dialog container cause the .dialog function will make it visible when its needed to be
您还可以隐藏真正的jsf命令按钮，并使用jquery#选择器通过对话框按钮访问它，并像在js文件中一样对它进行调用.
You also can hide the real jsf command buttons and access it through dialog button with jquery # selector and invoke the .click on it like I did in the js file.
最后一件事，使用onclick="initDialog(); return false;"来调用dialog js函数，并添加了return false，因此commandbutton不会尝试导航...
One last thing , used onclick="initDialog(); return false;" to call the dialog js function and added return false so the commandbutton wont try to navigate away...
通过使用jQuery UI对话框，您将获得最大的灵活性/对对话框的控制.
By using the jQuery UI Dialog you will get maximum flexibility/control over your dialogs.
该示例由2个文件(一个.xhtml和一个.js)组成，
The example consists from 2 file (one .xhtml and one .js) ,
我使用了jQuery和jQueryUI，根本不需要任何其他插件
I used jQuery and jQueryUI , no need in any other plugins at all
index.xhtml
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
and scripts.js
function initDialog() {
$("#idOfDialogPlaceHolder").dialog({
modal: true,
buttons: {
SomeButton: function () {
$("#justAButton").click();
},
Close: function () {
$(this).dialog("close");
}
},
});
}
就这样
这篇关于如何使用JQuery在JSF 2中打开Modal弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
