Hello experts!
I've just upgraded from APEX 5.1 + ORDS19 to APEX 20.2 + ORDS 20.2 running on RDBMS 19.8.
I'm stuck with part of the application that was customising apex.page.confirm and apex.message.confirm dialogs. It goes like this:
apex.page.confirm( 'Are you sure that you want to delete?' , "DELETE");
$("#apexConfirmBtn").addClass("t-Button t-Button--icon t-Button--danger t-Button--iconLeft");
$("#apexConfirmBtn").html('<span class="t-Icon t-Icon--left fa fa-trash-o" aria-hidden="true"></span><span class="t-Button-label">Delete User</span>');
I've noticed that there's no "#apexConfirmBtn" anymore, so replaced it with "button.js-confirmBtn" but there's no change in the dialog's button.
If I paste the following into the browser's console - it works perfectly fine:
$("button.js-confirmBtn").addClass("t-Button t-Button--icon t-Button--danger t-Button--iconLeft");
$("button.js-confirmBtn").html('<span class="t-Icon t-Icon--left fa fa-trash-o" aria-hidden="true"></span><span class="t-Button-label">Delete User</span>');
Similarly, with a code that replaces the dialog title and its contents:
apex.message.confirm( '\n\n\n\n\n\n' //this is only to properly size the popup window. $('.ui-dialog-content').css({'height': 'auto'}); gets overwritten at runtime
, function( okPressed ) { RunProcess();}
);
//customize the apex.message.confirm pop-up window
$('.ui-dialog').css({'top': '100px'});
$('.ui-dialog-titlebar').css({'background-color': '#e90c00'});
$('.ui-dialog-title').css({'color': 'white'});
$('.ui-dialog-title').html('Warning!');
$('.ui-dialog-content').css({'padding': '10px 10px 10px 10px'});
$('.ui-dialog-content').css({'font-size': 'small'});
$('.ui-dialog-content').html('<table><tr><td style="vertical-align: top;"><img src="#IMAGE_PREFIX#/themes/apps/icons/warning_96.png"></td>'
+'<td style="vertical-align: middle;">Are you sure you want to remove all data?<br><br>'
+'If you click on [Delete All] then all data already processed will be deleted.</td></tr></table>'
);
$("button.js-confirmBtn").addClass("t-Button t-Button--icon t-Button--danger t-Button--iconLeft")
$("button.js-confirmBtn").html('<span class="t-Icon t-Icon--left fa fa-trash-o" aria-hidden="true"></span><span class="t-Button-label">Delete All</span>');
Can someone explain to me what has changed in APEX 20.2 that is causing this? How to fix it?