如何使用JSF實現JQuery確認對話框
[英]How to implement JQuery confirm dialog with JSF
問題描述
當我在JSF頁面中按一個按鈕以確認動作執行（在我的情況下是確認刪除行）時，我想使用JQuery對話框。 我發現此JQuery代碼運行良好：
<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>
問題是我需要從該按鈕調用對話框進入Java Server Faces頁面：
<h:commandButton value="Delete" action="#{bean.deleteid}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
您能幫我實現這個例子嗎？
3 個解決方案
解決方案1
4 已采納 2012-05-21 10:13:16
這是我使用的一種方法
你需要兩個按鈕
第一個將被隱藏，並通過在確認對話框中單擊“ Yes而被調用，該隱藏的按鈕將成為調用服務器端方法並使用f:ajax render按鈕。
<h:commandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{bean.deleteid}" style="display:none">
<f:ajax render="@form" ></f:ajax>
</h:commandButton>
現在，將打開對話框的按鈕，此按鈕還將使用execute="@form"將表單提交到服務器（例如，如果您有選擇列）
<h:commandButton value="Delete">
<f:ajax execute="@form" onevent="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");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
}
請注意，只有單擊“確定”對話框按鈕，才會執行隱藏按鈕$("#myHiddenButtonID").click(); 否則什么都不會發生...
但我強烈建議您使用h:head而不是head和<h:panelGroup而不是div ...看看我之前的示例... JSF中的jQuery對話框
解決方案2
3 2012-05-18 17:03:08
如果必須調用它，請在單擊命令按鈕時說，然后使用onclick事件
<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return myjavascriptmethod">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
然后在對話框中，您可以檢查條件以進行確認，然后單擊“確定”以調度事件。
根據評論編輯：
當您不想使用div時，我只是使用了面板網格，您可以執行以下操作：
的xhtml
<h:panelGrid id="panelGridAsDialogTest" style="display:none;">
<h:outputLabel value="I Am a dialog test" />
</h:panelGrid>
var alreadyValidated = false;
function testJQueryDialog(buttonReference){
if(!alreadyValidated) {
$('#panelGridAsDialogTest').dialog({
autoOpen: true,
width: 600,
buttons: {
"Ok": function(event) {
$(this).dialog("close");
alreadyValidated = true;
jQuery(buttonReference).trigger("click");
},
"Cancel": function(event) {
event.preventDefault();
$(this).dialog("close");
}
}
});
}
return alreadyValidated;
}
如果您想堅持使用div但可以使代碼正常工作，則可以使用上面提供的相同的javascript，然后用div id替換id。
解決方案3
2 2013-07-07 14:15:23
一個更簡單的方法是不使用jquery dailog作為確認消息，只需在onclick中使用普通的javascript確認框，而無需重新發明輪子：
<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return confirm('Are you sure you want to delete this?')">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
您必須添加return，否則jsf將忽略用戶從確認框中選擇的內容，因此，如果用戶說單擊取消，仍將執行刪除功能。
在jsf中創建動態確認對話框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.