如何使用JSF实现JQuery确认对话框 [英] How to implement JQuery confirm dialog with JSF
问题描述
我想在按下一个按钮进入JSF页面时使用JQuery对话框以确认操作执行（在我的情况下确认删除行）。
我发现这个JQuery代码完美运行：
< html>
< head>
< title> jQuery UI示例页面< / title>
< link type =text / csshref =css / custom-theme / jquery-ui-1.8.18.custom.css =stylesheet/>
< script type =text / javascriptsrc =js / jquery-1.7.1.min.js>< / script>
< script type =text / javascriptsrc =js / jquery-ui-1.8.18.custom.min.js>< / script>
< script type =text / javascript>
$（function（）{
//手风琴
$（＃accordion）。accordion（{header：h3}）;
// Tabs
$（'＃tabs'）。tabs（）;
// Dialog
$（'＃dialog'）。dialog（ {
autoOpen：false，
width：600，
buttons：{
Ok：function（）{
$（this）.dialog（close ）;
}，
取消：function（）{
$（this）.dialog（close）;
}
}
}）;
//对话链接
$（'＃dialog_link'）。click（function（）{
$（'＃dialog'）。dialog（'open' ）;
返回false;
}）;
// Datepicker
$（'＃datepicker'）。datepicker（{
inline：true
}）;
// Slider
$（'＃slider'）。slider（{
范围：true，
值：[17,67]
} ）;
// Progressbar
$（＃progressbar）。progressbar（{
value：20
}）;
//静态小部件上的悬停状态
$（'＃dialog_link，ul＃icons li'）。hover（
function（）{$（this）.addClass（ 'ui-state-hover'）;}，
function（）{$（this）.removeClass（'ui-state-hover'）;}
）;
}）;
< / script>
< style type =text / css>
/ * demo page css * /
body {font：62.5％Trebuchet MS，sans-serif;保证金：50px;}
.demoHeaders {margin-top：2em; }
#dialog_link {padding：.4em 1em .4em 20px; text-decoration：none; position：relative;}
#dialog_link span.ui-icon {margin：0 5px 0 0; position：absolute ; left：.2em; top：50％; margin-top：-8px;}
ul＃icons {margin：0; padding：0;}
ul＃icons li {margin：2px;位置：相对;填充：4px 0;游标：指针;向左飘浮; list-style：none;}
ul＃icons span.ui-icon {float：left;保证金：0 4px;}
< / style>
< / head>
< body>
<！ - 对话框注意：此演示中的UI不会生成对话框，因此可以在themeroller中进行视觉样式设置 - >
< h2 class =demoHeaders> Dialog< / h2>
< p>< a href =＃id =dialog_linkclass =ui-state-default ui-corner-all>< span class =ui-icon ui-icon- newwin>< / span>打开对话框< / a>< / p>
<！ - ui-dialog - >
< div id =dialogtitle =Dialog Title>
< p> Dialog Test< / p>
< / div>
< / body>
< / html>
问题是我需要从这个按钮调用对话框到Java Server Faces页面：
< h：commandButton value =删除action =＃{bean.deleteid}>
< f：ajax render =@ formexecute =@ form>< / f：ajax>
< / h：commandButton>
请帮我实现这个例子吗？
这是我使用的方法
你需要两个按钮
第一个将被隐藏，并且将在确认对话框中单击是进行调用，此隐藏按钮将是将调用服务器端的按钮方法，并将使用 f：ajax
<
渲染 pre> < h：commandButton id =myHiddenButtonIDvalue =DeleteHiddenButtonaction =＃{bean.deleteid}style =display：none>
< f：ajax render =@ form>< / f：ajax>
< / h：commandButton>
现在按钮将打开对话框，此按钮也会将表单提交给服务器 execute =@ form（例如，如果您有选择列）
< h：commandButton value =删除>
< f：ajax execute =@ formonevent =openDialogFunc（）>< / f：ajax>
< / h：commandButton>
现在执行js函数
function openDialogFunc（data）{
if（data.status ==='success'）{
$（'＃dialog'）。dialog（{
autoOpen：false，
width：600，
buttons：{
Ok：function（）{
$（＃myHiddenButtonID）。click（）;
$（this）.dialog（close）;
}，
取消：function（）{
$（this）.dialog（close）;
}
}
}）;
}
}
请注意，只有点击OK对话框按钮才会执行隐藏按钮 $（＃myHiddenButtonID）。click（）; 否则不会发生任何事情......
但我强烈建议您使用 h：head 而不是 head 和< h：panelGroup 而不是div ...看看我之前的例子...... jQuery Dialog in JSF
I want to use JQuery dialog when I press a button into JSF page in order to confirm action execution(in my case to confirm the deletion of rows). I found this JQuery code working perfectly:
<html>
<head>
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
$('#slider').slider({
range: true,
values: [17, 67]
});
// Progressbar
$("#progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Dialog Test</p>
</div>
</body>
</html>
The problem is that I need to call the dialog from this button into Java Server Faces page:
<h:commandButton value="Delete" action="#{bean.deleteid}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
Would you help me please to implement this example?
Here an approach that I use
You need two buttons
first one will be hidden and will be called as a result of clicking Yes in the confirm dialog, this hidden button will be the one that will call the server side method and will do the render using the f:ajax
<h:commandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{bean.deleteid}" style="display:none">
<f:ajax render="@form" ></f:ajax>
</h:commandButton>
now to the button that will open the dialog, this button will also submit the form to the server with execute="@form" (in case you have selection column for example)
<h:commandButton value="Delete">
<f:ajax execute="@form" onevent="openDialogFunc()"></f:ajax>
</h:commandButton>
now to the implementation of the js function
function openDialogFunc(data){
if (data.status === 'success') {
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$("#myHiddenButtonID").click();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
}
Notice that only upon clicking the OK dialog button there will be an execution of your hidden button $("#myHiddenButtonID").click(); otherwise nothing will happen...
But I really strongly recommend you to use h:head instead of head and <h:panelGroup instead of div ... look at my previous example... jQuery Dialog in JSF
这篇关于如何使用JSF实现JQuery确认对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
