icon-arrow icon-check icon-mail icon-phone icon-facebook icon-linkedin icon-youtube icon-twitter icon-cheveron icon-download icon-instagram play close close icon-arrow-uturn icon-calendar icon-clock icon-search icon-chevron-process icon-skills icon-knowledge icon-kite icon-education icon-languages icon-tools icon-experience icon-coffee-cup
Werken bij Integration & Application Talents
Blog 16/11/2015

A nifty way to refresh page regions in Oracle APEX

Refresh

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.

When...

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.

Geen reacties

Geef jouw mening

Reactie plaatsen

Reactie toevoegen

Jouw e-mailadres wordt niet openbaar gemaakt.

Geen HTML

  • Geen HTML toegestaan.
  • Regels en alinea's worden automatisch gesplitst.
  • Web- en e-mailadressen worden automatisch naar links omgezet.

Wil je deel uitmaken van een groep gedreven en ambitieuze experts? Stuur ons jouw cv!