Use jQuery to dynamically modify Region title

In a recent post I showed how to determine the APEX region title on load of the page. This post will show how to change the region title dynamically - without submitting the page, and still in three steps.

1) Add a static ID to the region you want to change, this helps the jQuery selector identify the component to change. I set mine to edit_emp

2) Add JavaScript variable to your function and global variable declaration section in your page attributes.
var orig = "x";

I'm not completely happy with this part of the solution, but I find greater confidence than null comparisons in JavaScript.

3) Create a dynamic action on the event you wish to invoke change on the region heading. In my case I'll set it on change of the department. It needs to execute some JavaScript.

Dynamic Action definition

The JavaScript does two things. First, it records the original value of the region title - if this isn't done then the title will keep extending after each change. We use the region static ID to identify the region, then refer to H1 to identify the header text.

As I suggested in point 2, this comparison of orig is a little clunky, I welcome suggestions to make it more elegant (besides just defining your own text from scratch).

if (orig == "x")
   orig = $('#edit_emp h1').text();

$('#edit_emp h1').text(orig + ' (' + $('#P6_DEPTNO option:selected').text() + ')');

The second part extents the original region text with whatever you like - in my case I take the label of the value chosen in the select list.

This is demonstrated in my sample application.

Scott