I want to implement question dialog in JSF page. Simply explained I want the user to confirm (Yes or No) before he deletes a row into JSF table. I tried to implement this JavaScript dialog but something is wrong.
function questiondialog(){
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
}
<h:mandButton value="Delete" action="#{beam.deleterow}"
onclick="questiondialog()" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
When I click the button there is not dialog.
EDIT After spending half a day in cutting the code slice by slice I found the problem: This is the code that is working:
<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>
I turns out that I need also div layer to display the dialog. How I can use this code with this AJAX JSF button?
<h:mandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
I want to implement question dialog in JSF page. Simply explained I want the user to confirm (Yes or No) before he deletes a row into JSF table. I tried to implement this JavaScript dialog but something is wrong.
function questiondialog(){
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
}
<h:mandButton value="Delete" action="#{beam.deleterow}"
onclick="questiondialog()" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
When I click the button there is not dialog.
EDIT After spending half a day in cutting the code slice by slice I found the problem: This is the code that is working:
<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>
I turns out that I need also div layer to display the dialog. How I can use this code with this AJAX JSF button?
<h:mandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
- try onclick="questiondialog(); return false;" – Daniel Commented May 17, 2012 at 14:45
2 Answers
Reset to default 3Change autoOpen: false to autoOpen: true.
The jQuery-UI-Dialog documentation (http://jqueryui./demos/dialog/) clearly says,
When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it.
add
$('#dialog').dialog('open');
before
$('#dialog').dialog({....
INMO you better remove the autoOpen at all
Also know that you can't do confirm dialog like this... I mean if you want to stop the workflow with open dialog and continue it or discard it you should change your dialog Yes and No buttons behavior... but that's a diff question...
In short : you should open dialog from a button (but don't use that button action to delete row, instead execute another hidden button click with jquery , and that button will be the one with action attribute set to call bean method that deletes the row...) cause opening a dialog from mouse click is differnt than call js built in confirm function , cause the confirm function stop the workflow , while opening a dialog does not...
take a look at this plete example of jQuery dialogs + JSF2
EDIT
<h:mandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" >
<f:ajax render="@form" execute="@form" oneven="function(data){if(data.status==='success'){openDialogFunc();}}"></f:ajax>
</h:mandButton>