ORACLE APEX 5.1 Fade Success Message automatically

We have all wait a long time of APEX 5.1.
One oft he most important feature of 5.1 is Interactive grid.

Were i was playing with 5.1 i see that the success message dont fade out like in 5.0.
For 5.0 i found a solution and i try the same one for 5.1, but it doesnt work.

So i inspect the HTML code and found the change with the APEX_SUCCESS_MESSAGE.

I search the div container to see the success message but i can find it.
Were he is?

After i start an save process i saw what i want the little green box in the upper right corner

I inspect the HTML again and saw that there is the div with the id t_Alert_Success.
Okay the div is didnt render if i come on the page the first time.

I need a function to check permanently the changes of APEX_SUCCESS_MESSAGE.
Because, APEX add classes to APEX_SUCCESS_MESSAGE.
So i found MutationObserver and it was what i need.
I Implement it on a global page to have the outofade on all pages.

1. Create a Dynamic Action on Global page
– Event: Page Load

2. True
-Action: Execute JavaScript Code


// The node to be monitored
var target = $( "#APEX_SUCCESS_MESSAGE" )[0];

// Configuration of the observer:
var config = { 
  attributes: true, 
  childList: true, 
  characterData: true 
};

// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added
      var $nodes = $( newNodes ); // jQuery set
      $nodes.each(function() {
        var $node = $( this );
        if(  $('#APEX_SUCCESS_MESSAGE').hasClass( "u-visible" ) ) {
          // do something
            $('#t_Alert_Success').ready(function() { 
                setTimeout(function() { 
                   $('#t_Alert_Success .t-Button--closeAlert').click();
                     }, 3000); // here u can change the view time
            });
        }
      });
    }
  });    
});
 
// Pass in the target node, as well as the observer options
observer.observe(target, config);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s