How to implement JQuery confirm dialog with JSF
Question
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?
3 answers
solution1
4 ACCPTED 2012-05-21 10:13:16
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
solution2
3 2012-05-18 17:03:08
If you have to call it say on click of commandbutton then use onclick event
<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return myjavascriptmethod">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
then in the dialog you can check the condition for confirmation, on click of Okay dispatch the event.
Edit As per comment:
when you dont want to use a div, I just used a panel Grid, you can do something like this:
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;
}
If you want to stick to div but make your code work you can just use the same javascript given above, and replace the id with div id.
solution3
2 2013-07-07 14:15:23
A much simpler approach would be to not use a jquery dailog for confirmation message, just use normal javascript confirm box in the onclick , no need to reinvent the wheel:
<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>
You must add return otherwise jsf will ignore what the user chose from the confirmation box, so if the user say clicks cancel the delete function will still be executed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.