In one of our Oracle APEX 4.2 projects we wanted to use the famous jQuery UI autocomplete feature. By default, APEX 4.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?
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
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
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
})(jQuery, window, document);
})(jQuery1_7_1_UI1_8_22, window, document);
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.
Just perform all steps of solutions 1 and 2, but change the arguments of the IIFE call from
})(jQuery, window, document);
})((typeof jQuery1_7_1_UI1_8_22 !== "undefined" && jQuery1_7_1_UI1_8_22.ui) ? jQuery1_7_1_UI1_8_22 : jQuery, window, document);
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.