JQuery UI modal delete confirmation

Question

Hi,
I am looking for suggestion on how to fix my script.
What I am trying to accomplish is to replace a regular javascript delete confirmation window with jquery modal. My regular javascript delete confirmation (as it is build-in thing) looks as:
in page header I have:
script language="JavaScript" type="text/javascript">
<!--
htmldb_delete_message='"DELETE_CONFIRM_MSG"';
//-->
</script>and I have a template based button with Database Action: SQL Delete action and Option URL Redirect to
javascript:confirmDelete(htmldb_delete_message,'DELETE');
What I am trying to do with jquery ui is:
1. I have this script in my page header
<script>
$(function() {
     $( "#dialog:ui-dialog" ).dialog( "destroy" );     
     $( "#dialog-confirm" ).dialog({
               resizable: false,
                        autoOpen: false,
               height:140,
               modal: true,
               buttons: {
                    "Delete all items": function() {
                         $( this ).dialog( "close" );
                    Cancel: function() {
                         $( this ).dialog( "close" );
     </script>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted
and cannot be recovered. Are you sure?</p>
</div>and I have a template based button (the same as before) with Database Action: SQL Delete action and Option URL Redirect to
javascript:$('#dialog-confirm').dialog('open')
My Issues:
1. When I click on my "Delete" button, I am not getting my modal confirmation pop up in IE at all but I am getting it in Firefox for 0.5 second and then in both browsers I get white page with " [object Object] " on it.
2. If I change my button to HTML button, I am getting my modal pop up screen but if I am confirming my delete option...it doesn't delete anything. For delete I use "Automatic Row Processing (DML)" process and I want to use Template based button not the HTML.
I would really appreciate any help and suggestions.
Thanks

Answer 1

Hi,
Create HTML region without template to before footer.
Place to region source
<script>
$(function(){
$("#dialog-confirm").dialog({
  resizable:false,
  autoOpen:false,
  height:140,
  modal:true,
  buttons:{
   "Delete all items":function(){$(this).dialog("close");doSubmit('DELETE')},
   Cancel:function(){$(this).dialog("close")}
function confDialog(){$('#dialog-confirm').dialog('open')}
</script>
<div id="dialog-confirm" title="Empty the recycle bin?" class="hideMe508">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted
and cannot be recovered. Are you sure?</p>
</div>And button URL target
javascript:confDialog()Regards,
Jari
Edited by: jarola on Nov 10, 2010 9:02 AM
Edited by: jarola on Nov 10, 2010 9:36 AM
If you do not like change all your delete buttons:
Just create HTML region to page zero before footer without template.
Place to source
<div id="htmldb-conf-dialog" title="Confirm"></div>
<script type="text/javascript">
$('#htmldb-conf-dialog').dialog({resizable:false,autoOpen:false,modal:true});
function confirmDelete(m,r){
$('#htmldb-conf-dialog').html($nvl(m,htmldb_delete_message)).dialog('option','buttons',{
  "OK":function(){$(this).dialog("close");doSubmit(r)},"Cancel":function(){$(this).dialog("close")}
}).dialog('open')
</script>This will overwrite original alert
Regards,
Jari