Close wait popup on validation trigger

Today, I came across a scenario when, there was a validation on my page and I have SUBMIT button which will do validations. I also want to show loading indicator using waitPopup JavaScript API which I wrote on dynamic action "Before Page Submit". But, when validation triggers, I also want to hide it.

The problem was, when it hit the validation, it will show validation message as well the wait popup. Now, I want to hide wait popup when it triggers the validation.



Solution:

1. First change item level validation to page level validation. If you have set item required value to yes, change it to no and create page level validation which will say item is not null.

2. Create following dynamic action to show wait popup:

Name: Show Loading Icon
Event: Before page submit
True Action -> Execute JavaScript Code:
vPopup = apex.widget.waitPopup();

Please note that vPopup should be defined as Global JavaScript variable

3. Create following dynamic action to hide wait popup:

Name: Hide Spinner
Event: Custom
Custom Event: DOMSubtreeModified
Selection Type: jQuery
jQuery Selector: #APEX_ERROR_MESSAGE
Event Scope: Dynamic

True Action -> Execute JavaScript Code:
try{
  vPopup.remove();
}
catch(e){}

Working Demo Link

Hope this helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com

Comments

  1. We can use also this '.a-Form-error.u-hidden' as 'jQuery Selector' is error is inline below the item

    ReplyDelete

Post a Comment

My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)

Popular posts from this blog

Oracle APEX - Interactive Report - Scrollbars on Top

How to create your own customized nested report regions using jQuery

Oracle APEX - Build Your Own Enhanced Nested Report