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!
Posted by at

15 comments:

  1. SydOracleJuly 20, 2008 at 10:09 PM

    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.

    ReplyDelete
  2. GlennDecember 15, 2008 at 1:09 PM

    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

    ReplyDelete
  3. Dan McGhanDecember 15, 2008 at 1:26 PM

    Glenn,

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

    Regards,
    Dan

    ReplyDelete
  4. AnonymousFebruary 18, 2009 at 9:30 PM

    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

    ReplyDelete
  5. Dan McGhanFebruary 18, 2009 at 9:38 PM

    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

    ReplyDelete
  6. AnonymousFebruary 18, 2009 at 9:52 PM

    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

    ReplyDelete
  7. Dan McGhanFebruary 18, 2009 at 10:13 PM

    Kumar,

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

    Regards,
    Dan

    ReplyDelete
  8. AnonymousFebruary 18, 2009 at 10:19 PM

    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

    ReplyDelete
  9. Dan McGhanFebruary 18, 2009 at 10:26 PM

    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

    ReplyDelete
  10. Kaumil GandhiFebruary 18, 2009 at 11:07 PM

    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

    ReplyDelete
  11. Dan McGhanFebruary 18, 2009 at 11:15 PM

    Kumar,

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

    Regards,
    Dan

    ReplyDelete
  12. AnonymousFebruary 19, 2009 at 4:20 AM

    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

    ReplyDelete
  13. Kaumil GandhiFebruary 19, 2009 at 7:10 PM

    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

    ReplyDelete
  14. AnonymousFebruary 20, 2009 at 5:31 AM

    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

    ReplyDelete
  15. AnonymousFebruary 24, 2009 at 12:14 PM

    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

    ReplyDelete

Subscribe to: Post Comments (Atom)