A nifty way to refresh page regions in Oracle APEX

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.

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.