My current development environment is HP Laptop with Windows 7 Home Premium, Oracle XE 10g and Apex 4.01.
Apex 4.01 has jQuery 1.4.2 internally and the namespace (shortcut) is $ and apex.jQuery. The jQuery-UI version 1.8 is also installed and part of the head section for the templates I am using. Here is the HTML after the template substitution variable #HEAD# is replaced:
<link type="text/css" href="/i/css/apex_4_0.css" rel="stylesheet">
<link type="text/css" href="/i/libraries/jquery-ui/1.8/themes/base/jquery-ui-1.8.custom.min.css" rel="stylesheet">
<script type="text/javascript">
var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
</script>
<script type="text/javascript" src="/i/libraries/jquery/1.4.2/jquery-1.4.2.min.js">
<script type="text/javascript" src="/i/javascript/apex_4_0.js">
<script type="text/javascript" src="/i/javascript/apex_legacy_4_0.js">
<script type="text/javascript" src="/i/javascript/apex_widget_4_0.js">
<script type="text/javascript" src="/i/javascript/apex_dynamic_actions_4_0.js">
<script type="text/javascript" src="/i/libraries/jquery-ui/1.8/ui/minified/jquery-ui-1.8.custom.min.js">
I wanted to have the latest stable jQuery library available with the namespace (shortcut) of $jq to avoid confusion, and I am easily confused. The steps were
1. Download jQuery library from http://jquery.com/
2. In Apex upload/create a new image, using the mouse clicks:
Applications Builder>Application XXX>Shared Components>Images
3. Browse to and the jQuery library just downloaded
4. Modify the Header page template(s) of the them you are using.
Before:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
<head>
<title>#TITLE#</title>
<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
#HEAD#
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_1/css/theme_4_0.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_1/css/theme_4_0_ie.css" type="text/css" /><![endif]-->
After:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
<head>
<title>#TITLE#</title>
<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<script src="#WORKSPACE_IMAGES#jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq = jQuery.noConflict()</script>
#HEAD#
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_1/css/theme_4_0.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_1/css/theme_4_0_ie.css" type="text/css" /><![endif]-->
I edited page 1; JavaScript>; to verify that two versions of jQuery were available.
$(document).ready(function() {
$("a").click(function() {
alert("hello");
alert('You are running jQuery version: ' + $.fn.jquery);
alert('You are also running jQuery version: ' + $jq.fn.jquery + ' as $jq');
});
});
Notice the use of $ and $jq. The $.fn.jquery returns 1.4.2 and the $jq.fn.jquery returns 1.6.1.
So there are some learnings here.
1. /i/ in Oracle XE is not a directory per se. The jQuery library I created as an image was not found in c:\oraclexe\apex\images but it did load when the HTML was viewed in Firebug.
2. the noConflict needs to be run after the extra library is loaded and before the Apex internal jQuery is loaded.
3. I saw in the Apex forum that Apex used noConflict to create the namespace (shortcut/longcut) allowing the internal jQuery to be called with apex.jQuery or $. I did not see that in the HTML using Firebug.
