Follow Us on Twitter

A nifty way to refresh page regions in Oracle APEX

by Patrick Sinke on November 16, 2015 · 9 comments

Not all regions in APEX can be refreshed using the PPR mechanism. Especially PL/SQL regions are difficult to refresh with AJAX.

Although… the fact that the HTML in a PL/SQL region is constructed in PL/SQL may be in your advantage. With the use of a tiny bit of JQuery and an application process, you will be able to update a region asynchronously. I’ll show you how.

First, create a PL/SQL region and write some PL/SQL that generates your report using the htp.p and alike functions. Make sure that your code is placed in a database package, let’s say we call the procedure apx_report.emp_report. Add a class or ID to your table so you can refer to it from Javascript. In this example, I’ve named the ID “EmpTable”.

Next, create a new application process, type On Demand and name it refreshEmp. Call the procedure you’ve just compiled in the process source.

Now create a dynamic action that fires on the event you want your region te reload, for instance an on-change.

dyn-action1

 

 

 

The True action is of type “Javascript” and contains the following code:

apex.server.process ("refreshEmp", {
 dataType:"text", success: function(pData){ $("table#EmpTable").replaceWith(pData); }});

That’s all! The javascript function apex.server.process calls your application process “refreshEmp”, but the trick is to feed the result from the pl/sql procedure ( put in pData) to a jQuery function, which replaces the content of your current table with the new data. It’s fast, and very non-obtrusive to the user.

There is one last thing. You might notice that other dynamic actions in the region will stop working after the AJAX call. That is because, when refreshing that part of the page, you lose all event handlers to the DOM objects there. In jQuery you solve that by replacing the $(“.whatever”).click(function() { //other stuff }) by $(“.whatever”).on(‘click’, function() {}) . It’s a tiny bit easier in APEX.

Remember the Advanced section in your Dynamic Action? There’s a select list called “event scope”. Go to the dynamic actions that trigger on the AJAX region and change the Event Scope to “Dynamic”. Also enter the ID of your region (that’s the one you set in the Region properties) as a jQuery Selector, e.g. #EMPREGION.  You’re set and done now! I think it’s a big improvement over reloading the entire page.

 

 

A nifty way to refresh page regions in Oracle APEX, 5.0 out of 5 based on 1 rating
Ratings:
VN:D [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

{ 9 comments… read them below or add one }

Michel June 20, 2016 at 8:43 am

Hi Patrick,

you are missing the second quote in $(“.whatever).on(‘click’, function() {}). For the rest nice article.

Wkr,
Michel

Reply

Patrick Sinke June 28, 2016 at 4:49 pm

Hi Michel,

Thanks for noticing! I’ve fixed it.

Reply

Jaro Bak August 16, 2016 at 8:36 pm

Hello,
a very nice guideline, thank you.
However with this piece “$(“.whatever”).on(‘click’, function() {}) ” I am totally lost what to do and where.
Would you, please, be more exact, if possible ?

BTW, on which APEX version is it working fine for you ?
Thank you in advance.

Reply

Patrick August 17, 2016 at 9:32 am

Hi Jaro,

In Apex you do not need that piece of code. Just follow the steps in the next paragraph and you should be fine.
This should work on any version of Apex that supports dynamic actions.

Hope that helps!

Reply

Jaro Bak August 17, 2016 at 10:42 am

Hello,
thanks for your quick reply.
The problem we had was somwhere else.
Here is a snippet of our code:
apex.server.process( “p11_rrr”, {}, { dataType: ‘text’, success: function(pData) { $(“#P11_REQ”).replaceWith(pData); }, loadingIndicatorPosition: “page” });

Please, notice this added piece “{},” before “{ dataType: ….”
without it there was still JSON error in APEX 5.0.1
Hope might be somehow useful for somebody.

Anyhow, it was very helpful for us.
Thank you again.

Have a nice day.

Reply

Attila April 11, 2018 at 5:17 pm

You saved the day!
AJAX error has eliminated but unfortunatly still not the effect desired 🙁

Reply

Trevor North December 21, 2016 at 11:59 pm

I have a few regions updating this way in Apex 4.2.

At the moment , the Ajax refresh seems to stop the timeout plugin I am using detecting there is no user activity so it doesnt timeout – instead, the base Apex server side timeout takes effect and the user has to do something to be redirected to the login page.

I was thinking the ideal would be to limit how long the ajax refresh runs for (and then set the server side timeout to longer than this but i cant see how to do this.

Is there a way to have an ajax refresh only run for a set length of time (say 30 mins). With some indication on the screen that it is in Auto refresh mode. Then when it is not auto refreshing, the user could just hit the browser refresh button to continue the auto updates or the timeout plugin would take effect and log the user out cleanly ?

Thanks in advance.
T

Reply

Patrick Sinke December 23, 2016 at 12:38 pm

Hello Trevor, if the status of the timer is available in Javascript, you might want to check that status before calling the apex.server.process thing in the dynamic action. Just put an if statement around it. You can also extend the IF part and the ELSE part to update the notifications on your page.
I hope that works for you!

Reply

Mike Derosier April 21, 2018 at 11:21 pm

I love you man!

Reply

Leave a Comment

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter