Upgrade-safe inclusion of version-dependent JavaScript libraries in Oracle APEX

Problem

In one of our Oracle APEX 4.2 projects we wanted to use the famous jQuery UI autocomplete feature. By default, APEX 4q.2 applications contain a subset of jQuery UI (see Oracle APEX 4.2 Documentation for more details). It is a pity autocomplete functionality is not part of that subset. Fortunately, the APEX server is shipped with the necessary libraries. That makes it easy to include them. When looking at the file structure of our APEX server, you can see that there are multiple versions of jQuery UI.

Each of these version folders contains a corresponding version of the autocomplete feature.

So, what is the correct version to include?

Using a JavaScript console it is quiet easy to determine the jQuery UI version which is automatically included by APEX. Just type

into your console’s CLI and have a look at the output.

Recognizing our jQuery UI version is 1.8.22 one way to include the appropriate version of our jQuery UI autocomplete feature would be to insert the following code into our page header.

But there is one serious disadvantage using this pragmatic approach. When you upgrade your APEX server in the future your APEX application might break. Why? Because the core jQuery UI libraries published by the APEX server could have another version. So our manually loaded autocomplete feature might not be compatible with this newer autoloaded jQuery UI version.

But don’t panic, there are solutions to keep the libraries in sync. I will explain three possible solutions using the following simple sample page. It contains a region called “jQuery AutoComplete Region” with one page item “P2_AUTOCOMPLETE_ITEM”.

When running the page without the autocomplete feature we are able to type some text into P2_AUTOCOMPLETE_ITEM. The input field works as designed, but this beavior is not so much impressive.

What we want to achieve is that P2_AUTOCOMPLETE_ITEM provides a list of suggestions using jQuery UIs autocomplete feature.

Solution 1 – Extend jQuery UI version included by default

This solution is simple but powerful. Whereas jQuery and a subset of jQuery UI is loaded by default, our task is to manually load the corresponding version of jQuery UI’s autocomplete module.The only thing we have to do is to put the following Immediately-Invoked Function Expression (IIFE) into the page header

If the currently loaded jQuery object does not contain jQuery UI’s autocomplete module we will manually load it into the page. For that reason we build the URI of our jQuery UI autocomplete javascript file which is related to the currently loaded jQuery UI version (line 26). Please notice that we want to load the minified version of the file. The script itself is loaded using jQuery’s getScript() function (line 30). After jQuery UI autocomplete has been included we are able to bind the list of suggestions (line 4 pp.) to our input text field (line 18). To ensure the binding is invoked after the script has been loaded it is called by jQuery’s when()-function (line 30).

In order to test our code, we run our sample page once again. When typing the letter “j” into our input text field the expected autocomplete box appears!

Choosing this approach we ensure, that the versions of the autoloaded jQuery UI components and the manually loaded extension are in sync. This is upgrade-safe, as long as the jQuery UI API is not changed in future versions. If this is acceptable to you, solution 1 should be your choice.

Solution 2 – Include and use older jQuery/jQuery UI version

When implementing custom jQuery/jQuery UI based functionality in your APEX application, you are sure that the code works with the jQuery/jQuery UI versions you used to implement your code. As written in the introduction of this article the APEX server is shipped with multiple versions of jQuery. So, if the libraries we used to implement our custom behavior are delivered with future versions of APEX, it would be smart to use them.

When implementing custom jQuery based code, we have to determine the currently used jQuery-Version. Type

into your JavaScript console’s CLI and take the output. Let’s assume the output says your jQuery version is 1.7.1.

Keeping this information in mind, we have to edit the page template. Within the page template we can include jQuery 1.7.1 combined with jQueryUI 1.8.22 and assign it to a JavaScript variable jQuery1_7_1_UI1_8_22. In order to achieve this, we have to edit our page template. To open the edit view just double-click on the page template link in the application builder’s page view:

Insert the following code just before the #APEX_JAVASCRIPT# substitution string that appears in the “header” section. In APEX versions prior to 4.2 insert code before #HEAD# substitution string.

This ensures, that jQuery version 1.7.1 is loaded (line 1). This jQuery version is extended by jQuery UI 1.8.22 (line 2), which itself is extended by jQuery UI autocomplete feature 1.8.22 (line 3). The whole setup is stored into JavaScript variable jQuery1_7_1_UI1_8_22 (line 6).

In order to use jQuery 1.7.1 instead of the APEX default jQuery version, we have to change the arguments (last line) of our Immediately-Invoked Function Expression (IIFE) in our page header from

to

As a result code within the IIFE will use jQuery 1.7.1 instead of the jQuery version shipped with the APEX server. The rest of your APEX application will use the version shipped with APEX. The benefit you get using this solution is, that your code always runs against the jQuery version you used to develop the code. The disadvantage is that you have to trust in Oracle that future versions of APEX will be delivered with “your” jQuery/jQuery UI version.

Solution 3 – The best of 1 and 2

To avoid the disadvantages of solutions 1 and 2 it would be nice if the jQuery/jQuery UI versions you have used during development would only be used if they are available.

No problem!

Just perform all steps of solutions 1 and 2, but change the arguments of the IIFE call from

to

This ensures that “your” jQuery-Version (1.7.1) is only passed into IIFE, if it has been loaded and extended by “your” jQuery UI version 1.8.22. Otherwise the default jQuery version delivered by APEX server will be used.