Home > Application Express, Oracle, Uncategorized > Installing jQuery to Application Express ( APEX )

Installing jQuery to Application Express ( APEX )

Sometimes, you want to add different things your page such as different buttons, images, motions. JQuery API provides these wishes by using JavaScript and CSS.

For detail information, examples and to do download this api, visit http://jquery.com.

If you want to import and use this api in your Apex Application you will have to do some steps.

1 ) Download latest version of jQuery Api from http://jquery.com or customizable version at : http://jqueryui.com/download
2 ) Install those files to $ORACLE_HOME/apex/images/jquery/ folder. ( jQuery folder must be created ).
3 ) Then, you should edit the $ORACLE_HOME/apex/images/imagelist.xml file.
This file an xml file and you should add those under the directories node.



jquery
jquery/theme
jquery/theme/images

And, you should add file paths under the files node. ( Those file names should be changed if you downloaded another version instead of 1.6 Personalized JQuery )

/jquery/jquery-1.3.1.js
/jquery/jquery-ui-personalized-1.6rc6.min.js
/jquery/jquery-ui-personalized-1.6rc6.js
/jquery/theme/ui.accordion.css
/jquery/theme/ui.all.css
/jquery/theme/ui.base.css
/jquery/theme/ui.core.css
/jquery/theme/ui.datepicker.css
/jquery/theme/ui.dialog.css
/jquery/theme/ui.progressbar.css
/jquery/theme/ui.resizable.css
/jquery/theme/ui.slider.css
/jquery/theme/ui.tabs.css
/jquery/theme/ui.theme.css
/jquery/theme/images/ui-bg_diagonals-thick_18_b81900_40x40.png
/jquery/theme/images/ui-bg_diagonals-thick_20_666666_40x40.png
/jquery/theme/images/ui-bg_flat_10_000000_40x100.png
/jquery/theme/images/ui-bg_glass_65_ffffff_1x400.png
/jquery/theme/images/ui-bg_glass_100_f6f6f6_1x400.png
/jquery/theme/images/ui-bg_glass_100_fdf5ce_1x400.png
/jquery/theme/images/ui-bg_gloss-wave_35_f6a828_500x100.png
/jquery/theme/images/ui-bg_highlight-soft_75_ffe45c_1x100.png
/jquery/theme/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
/jquery/theme/images/ui-icons_228ef1_256x240.png
/jquery/theme/images/ui-icons_222222_256x240.png
/jquery/theme/images/ui-icons_ef8c08_256x240.png
/jquery/theme/images/ui-icons_ffd27a_256x240.png
/jquery/theme/images/ui-icons_ffffff_256x240.png

4 ) After that, you should run apex_epg_config.sql ( in $ORACLE_HOME/apex directory ) and enter $ORACLE_HOME whichever it is, to refresh file paths.

SQL> @apex_epg_config

PL/SQL procedure successfully completed.

PL/SQL procedure successfully completed.

Enter value for 1: D:\app\TTASUNGUR\product\11.1.0\db_1\
old 1: create directory APEX_IMAGES as ‘&1/apex/images’
new 1: create directory APEX_IMAGES as ‘D:\app\TTASUNGUR\product\11.1.0\db_1\/
apex/images’

Directory created.

PL/SQL procedure successfully completed.

Commit complete.

PL/SQL procedure successfully completed.

timing for: Load Images
Elapsed: 00:00:59.68

Session altered.

PL/SQL procedure successfully completed.

Commit complete.

Session altered.

Directory dropped.

5 ) So far, you imported and installed the jquery to your Apex environment. Now, you can use jquery in your apex pages. Let’s do an example, create a page and create a region and we will create a draggable div place.

$(document).ready(function()
{
$(“#tasinabilir”).draggable( { revert: true } );

}
);

Bura tasinabilir bir bolge

( There are many examples at http://jquery.com )
6 ) Then test your page, click div place and drag it to anywhere and release, it will return its first position.

Advertisements
  1. Alex
    July 28, 2009 at 6:23 pm

    Works like a charm, but (there is always a “but”)… When using a datepicker (for example), it displays a datepicker – as expected – but without the looks. The colors and images related to jQuery are not there. Do you know how to do that as well?

  2. Alex
    July 28, 2009 at 6:29 pm

    ah,… you can ignore my previous comment… Found out what I was missing. I forgot to include the base CSS for my theme.
    Anyway, thanks for writing this blogpost.

  3. August 21, 2009 at 1:04 pm

    tnx buddy =)

  4. Marko Jaric
    January 11, 2010 at 10:51 pm

    What if I do not have access to the operating system? Is it possible to import JQuery into the APEX?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: