APEX jQuery Confirm Dialog

This article explains how to utilize jQuery Confirm dialog in APEX. It is also shown how to overwrite all standard APEX delete confirmation dialogs without changing Delete button URL targets.

If you are using APEX 3.x load jQuery and jQuery UI library's in page template header or page HTML header.

To start with, create HTML region to page zero:

• Display Point "Before Footer"
• Template "No Template"

Copy paste HTML and javascript to the region source:

<div id="htmldb-confirm-dialog" class="hideMe508">
<p class="fielddatabold"></p>
</div>
<script type="text/javascript">
 $('#htmldb-confirm-dialog').dialog({autoOpen:false});
 
 function htmldbConfirmDialog(pReq,pOpt){
  pOpt=$.extend({
   buttons:{
    "OK":function(){$(this).dialog('close');doSubmit(pReq)},
    "Cancel":function(){$(this).dialog('close')}
   },
   title:'Confirm Action',
   modal:true,
   message:'Do you like perform this action?'
   },pOpt);
  
  $('#htmldb-confirm-dialog').find('p').text(pOpt.message);
   
  $('#htmldb-confirm-dialog').dialog('option',pOpt).dialog('open');
}
</script>

Function parameters are:

• pReg: Request of submit
• pOpt: All possible that can be used in jQuery UI dialog + message that is dialog inner HTML

If you have delete button on APEX form, just replace URL target of that button:

javascript:htmldbConfirmDialog('DELETE',{message:htmldb_delete_message});

Of course, this can be utilized for any other Submit buttons.

The work of changing all Delete buttons URL targets can be simplified by adding helper function that converts standard delete confirmation dialog to jQuery dialog (i.e. no need to do modifications to button URL target):

<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>