23 April 2010

APEX and jQuery UI integration

We can import every javascript library (including jQuery) to Oracle APEX using standard import file process available from application level (Home>Application Builder>Application>Shared Components>Static Files) and then reference it in page header using #APP_IMAGES# or #WORKSPACE_IMAGES# as file source.

However files imported this way won’t be cached by browser (they are in database, not in server’s file system) and using this technique it’s hard to import packages containing several files referencing  to each other (like jQuery UI).

So if it’s possible you should upload jQuery and jQuery UI files directly on APEX server. To do this, find APEX folder and "images" catalogue inside. In "images" create subfolder "jQuery" and copy there jQuery and jQuery UI files.

Files from server

In "images" folder you should find imagelist.xml file. Edit it and add all dictionaries and all files you’ve just copied. Save the file, run SQL*Plus and execute script:

SQL> @apxldimg.sql PATH

where PATH is your APEX folder path. After several minutes all files will be available.

To use jQuery you must reference to imported files in HTML header (on single page or in page template) using:

<link rel="stylesheet"  type="text/css" href="#IMAGE_PREFIX#jQuery/css/ui-lightness/jquery-ui-1.8rc2.custom.css" />
<script type="text/javascript" src="#IMAGE_PREFIX#jQuery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="#IMAGE_PREFIX#jQuery/js/jquery-ui-1.8rc2.custom.min.js"></script>

Files from external source

If you don't want or simply can't import jQuery libraries and CSS in this way you can load them from external source (it's good idea for OTN applications). Just put this text in HTML header:


<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
   google.load('jquery', '1.4.2');
   google.load('jqueryui', '1.8.1');
</script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css" />

Test

To check if everything works fine, create new datepicker item on your page. In page HTML header put following code:

<script type=”text/javascript”>
$(document).ready(function () {
     $(".datepicker > input[id]").datepicker( { dateFormat: 'yy-mm-dd' });
});
</script>

After page refresh, when you click inside datepicker field, calendar region should appear.


2 comments:

Anonymous said...

Hello,
is this still correct way to integrate 3rd party jscript libraries with apex?

Pawel Co Faddey said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.