Creating a jQuery Dialog Alert in Oracle APEX

In this post I will be explaining how to create a jQuery Dialog Alert in Oracle APEX.

• Usually developers use the standard alert or apex.message to show an alert or confirm message. 

• When it comes to customized message box it is a better approach to create a jQuery Dialog Alert.

Follow the below steps to achieve this:

1) Paste the below JavaScript code in the Function and Global Variable Declaration section.

var openDialog = function (dTitle,dMessage ) {
                    
                    if ( !dTitle ) {
                        dTitle = 'Dialog';
                    }
                    if ( !dMessage ) {
                        dMessage = 'No message to display...';
                    }
                    
                    $('<div></div>').html( dMessage ).dialog({
                        title: dTitle,
                        dialogClass: "dialog-class",
                        resizable: false,
                        modal: true,
                        buttons: [
                                    {
                                        text: "Cancel",
                                        click: function() {
                                                    //your code...
                                                    //in this example: $( this ).text("Cancel Clicked!");
                                               }
                                    },        
                                    {
                                        text: "Ok",
                                        click: function() {
                                                    //your code...  
                                                    //in this example: $( this ).dialog( 'close' );
                                               }
                                    }
                                ]
                    });                   
                };

          

 2) To call this function (to open the jQuery dialog), 

• Create a dynamic action (in this example: on click of a button)
• Create a True Action -> Execute JavaScript code.       
• Paste the below code:                   

openDialog('Your jQuery Dialog Title','Your jQuery Dialog Content');

  Note: Use the reference link to perform more customization as per the requirement.  

Reference: https://jqueryui.com/dialog/   

Click here for DEMO

Happy CODING!!!

Thank you