Saturday, June 7, 2008

"Installing" jQuery in Application Express

So you've decided to use jQuery - smart move! Here's how you get it working in Application Express.

  1. Go to http://jquery.com and download the latest copy of the library. You'll find that each version is released with a few different compression levels. You can read more about them in their site but I recommend the "Packed" version to get you up in running quickly.
  2. Make the file you downloaded available on your web server. The most common way to do this in ApEx is to drop it in your "/i" directory. I would create a folder under that directory called "jquery" and place it in there. Later this folder can be used to hold the various plugins that you'll want to use.
  3. Now that the file is available for use you have to "include" it in your ApEx application. To make jQuery available on every page go to Shared Components > Templates. Open the page template that your application is using. Look in the Definition/Header textarea and between the <head> and </head> tags, add a line like the following but with the directory and filename specific to your setup: * Make sure to update use the version of jquery you downloaded.
    <script type="text/javascript" src="/i/jquery/jquery-1.2.3.pack.js"></script>
  4. If you application is using multiple page templates and you want to use jQuery in all of them, you'll have to add the line from step 3 to each one. Also, these steps must be repeated for each application. If you or your company has not already done so, you might want to create a custom theme that includes it so that each future application that created will have it by default.
That's it, you're done. Now it's time to have some fun!

15 comments:

Gary Myers said...

Cool. I've followed your data-picker instructions, and its working great.
Only one gotcha. I did a straight cut-and-paste of the code in point 3, but had picked up version 1.2.6 rather than 1.2.3.
it only took a minute to realise my mistake though.

Glenn said...

Hi Dan,

Any reason you would not link to Google's hosted version? If it is a intranet application, you may not wish to use it but for any external facing sites you may save your users 500k download. You would also be saving yourself the bandwith.

Any thoughts?

Glenn

dmcghan said...

Glenn,

I usually only develop internal applications - that's the only reason.

Regards,
Dan

Anonymous said...

Hi Dan,

Can you tell me where is actually /i directory(u mean images directory) or something else..... I'm trying to install jQuery(1.2.6, packed version) but didn't found any /i directory under Apex directory....

I have installed Apex 3.1.2 on Windows Vista OS.

can you help me for the same..???


regards,
Kumar

dmcghan said...

Kumar,

That is correct, it's the images directory. Are you running XE? If so, you'll need to go to Start > Computer > Right Click in middle > Add Network Location > Next > Choose custom network location > enter http://127.0.0.1:8080/i > Next > enter system credentials > enter name > next > finish.

Regards,
Dan

Anonymous said...

Hi Dan,

Thanks for the quick response, I have installed Apex 3.1.2 on Oracle 10g XE.

I'm trying "http://127.0.0.1:8080/i"
but it gives me error message as "The folder you entered does not appear to be valid. Please choose another."


regards,
Kumar

dmcghan said...

Kumar,

What do you get when you go to that address in FireFox? What about http://localhost:8080/i?

Regards,
Dan

Anonymous said...

Hi Dan,

I'm using Firefox, & when I enter "http://localhost:8080/i" or "http://127.0.0.1:8080/i" (in fact both are same) getting a long list of .gif files, Index of /i with file name, last modified time and file size...


thxs


regards,
Kumar

dmcghan said...

Kumar,

Sounds like everything is working, I'm not sure what the problem could be. You should be able to enter the system credentials and proceed to the folder.

Try running an online search for webdav on vista for some pointers...

You can also check out a recent posting from Stephen Blair but it's really for XP:
http://www.apex-blog.com/apex-themes/working-with-apex-theme-files-using-webdav-103.html

Regards,
Dan

Kaumil Gandhi said...

Hi Dan,

I tried with your link also with this below:-

http://kb.wisc.edu/luwmad/page.php?id=6280

download the downloader, rebooted the PC & now prompted with "XDB required username and password" I'm entering system credentials but still it's not working... are you sure we need to give system credentials or something else?????


thxs


regards,
Kumar

dmcghan said...

Kumar,

I've always used the system credentials with XE. Keep trying you seem to be making progress.

Regards,
Dan

Anonymous said...

Kumar,

I think you need to enable ftp on your oracle XDB. Long story short, open a sqlplus session( sqlplus / as sysdba), then, at the prompt:
SQL>exec dbms_xdb.setftpport(8181);

Then follow Dan's instructions above (with port 8181 instead of 8080).
Later you may want to disable it (security and all that):
SQL>exec dbms_xdb.setftpport(null);

Regards,
Iulian Dragan

Kaumil Gandhi said...

Hi Iulian Dragan,

I tried your way too, I'm able to successfully complete the PL/SQL procedure, but when I'm running "http://127.0.0.1:8181/i" it is not asking me the system credentials, rather it is giving me the same error "The folder you entered does not appear to be valid. Please choose another."

And when I'm running as "http://127.0.0.1:8080/i" it is asking me to enter XDB credentials but it is not accepting my system credentials, I did googling whole day but still wait for the success..????


Thanks,

Regards,
Kumar

Anonymous said...

Hmm, I think you should try
"ftp://127.0.0.1:8181"
I'm not sure how this stuff works in Windows.
If this doesn't work, try with the ftp client from the command line (I expect there is one, I'm not sure).
Try to connect with an Oracle database account, say SYSTEM. If you don't know your SYSTEM password, open sqlplus and type "alter user SYSTEM identified by some_password;".
Then, in a command line try this:
ftp 127.0.0.1 8181
Then it will ask you for a user, use system and then the password.
then:
cd i
cd javascript (if you want)
mkdir jquery
cd jquery
put your_jquery_file.js
exit

This should do.

Regards,
Iulian

Tony Miller said...

Dan,
I have a question in regards to installing a jquery plugin with apex 3.12.. Is it possible to get some help with it? I posted it up on the APEX support forum and received no input..

Thanks!

Tony Miller
Webster, TX