Creating simple jquery TABS in apex

All,
I am creating basic jquery TABS in apex but i realized its just not working as i thought... i really need help on this please?
what i did created in my region i added below code
<div id="tabs">
<ul>
<li><a href="#">Nunc tincidunt</a></li>
<li><a href="#">Proin dolor</a></li>
<li><a href="#">Aenean lacinia</a></li>
</ul>
</div>
then at page header i made references,
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="#WORKSPACES_IMAGES#style.css" />than i added child region to the above.
but all isn't working ....your help is appreciated regards

First off, why are you referencing a newer version of jquery than what is bundled with APEX? Here is a simple solution for your problem: http://www.warp11.nl/2011/04/tabs-within-apex-using-jquery/
Thank you,
Tony Miller
LuvMuffin Software
Ruckersville, VA

Similar Messages

Create simple database form in APEX

I'm trying to create a simple form off of a database table or query.
After going through the wizard, the form does not bring back any data.
I see it created a process Before Header: Fetch Row from table_name, but that doesnt' seem to be happening.
Is there something that has to be set to activate the form to actually query?
Thank you.

Hi,
In the form page's "Fetch Row..." and "Process Row..." processes, you can specify two key fields (one "primary" and one "secondary"). As long as the fields you are referencing are a unique combination, this should work ok. Though, ideally, you should create a primary key on all tables.
In both processes, make sure you complete the "...Secondary Key...." settings with the appropriate page item names and table column names. Your form page should also have two "hidden and protected" page items - one for each of the keys - the link from your report should populate both of these.
Andy

New themes in APEX 4 not working with JQuery tabs

Hi,
JQuery tabs only showed on themes 13, 15, 18, 20.
When I swicth to other themes, its not displayed like tabs

Hi,
you can simplify the the usage of jQuery tabs in APEX 4.0. You don't have to create hard coded JavaScript code for each page where you want to use them. Just use the new "Sub Region" feature and a corresponding region template.
Here is what you have to do:
1) Create a new template of type "Region" (create one from scratch)
a) Name: jQuery Tabs
b) Template Class: Custom 1
c) Template:
<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
</div>
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
apex.jQuery(function() {
apex.jQuery("##REGION_STATIC_ID#").tabs();
</script>d) Sub Regions - Header Template:
<ul>#ENTRIES#</ul>e) Sub Regions - Header Entry Template:
<li><a href="##REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION_TITLE#</a></li>f) Sub Regions - Template:
<div id="#REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION#</div>2) On the page where you want to have jQuery tabs, add a new "HTML" region which acts as the container for the "tabs". Set the region template to your new "jQuery tabs" template.
3) Create as many sub regions (that are the actual tabs). It's just important that you set the "Parent Region" to your container region you just created before. As region template I would pick "No Template" or any other template you want to have.
That's it. As you can see now from the region structure it's very obvious for any developer developer what regions are part of the jQuery tabs.
Regards
Patrick

How to go back to the current jquery tabs

Hi,
I have used Patric Wolf's method in (Re: New themes in APEX 4 not working with JQuery tabs to create the jquery tabs and it works great! Thank you Patric!
Inside each tabs, I have a "create button" to branch to another form page to create some records. Once I finish the form page, it will branch back to the tab page. Currently, it is always branch back to the first tab.
I want to know if it is possible to go back to the correct tab (which ever tab it branches out) after the form page?
For example - There are three tabs in page 23.
Tab 1 can branch to page 24
Tab 2 can branch to page 25
Tab 3 can branch to page 26
There are Cancel, Apply Changes and Save Buttons in each form page (page24, 25, and 26). Once a button is clicked, it should go back to the tab (either tab1, tab2 or tab3 in page 23) that it branch out.
Does anyone know how this can be done?
Thank you!
Ling

Hi,
I got this figure out.
Here is how I do it -
I gave a Region Static ID in the "home tab" as tab-home, and also give each tab a Region Static ID as well. The first one I set the Static ID as tab-1, second one as tab-2 and so on.
I branch back to a jQuery tab from other page like this-
Action-> Redirect to URL (ps: 100 is the page that has the jquery tabs)
URL target-> f?p=&APP_ID.:100:&SESSION.::&DEBUG.:::*#tab-home-tab-tab-2*
Thank you for all the people who tried to help!
Ling
Edited by: LC on Dec 28, 2010 3:47 PM

Create Simple Printable SQL Reports in APEX 3.2 Without a Print Server

Oracle Apex 3.2
Oracle 11g
OHS
I thought I'd post an answer on how to get a printable SQL report in Oracle Apex without having to configure a print server. I'm sure that similar things have been posted in various other places, but I found the documentation for using custom row templates (to create a printable report) to be incomplete at best. For my needs, I was not looking for an awe inspiring report printout, but rather simple directory information printouts. For example, if you wanted a printable report to look like this:
=================================
CURRENT ACTIVE EMPLOYEES REPORT
=================================
First Name: Bob                  Employee ID: 0000000000
Last Name: Swarts              Company Credit Card Number: 0000-0000-0000-0000
Middle Initial: F                  Social Security Number: 000-00-0000
First Name: Sue                  Employee ID: 1111111111
Last Name: Johnson           Company Credit Card Number: 1111-1111-1111-1111
Middle Initial: G                 Social Security Number: 111-11-1111
etc.....In MS Access, doing this is very easy. From what I understand, this is also very easy to do this using PDF software with a print server. However, if you are like me, you don't want to waste time and money by obtaining and configuring a print server (even if it is free). However, never fear because you can create simple reports like this with relatively minimalistic effort; and you can do so without having to configure a print server.
1.) Create a new page
2.) Create a new sql query report region on the page
3.) Make your query just as you would normally.
For this example the query would be:
select first_name, employee_id, last_name, company_credit_card_number, middle_initial, social_security_number from employee_table4.) Go to "Shared Components"
5.) Under "User Interface" click on "Templates"
6.) Click on the "Create" button
7.) Select "Report"
8.) Select "From Scratch"
9.) For the "Template Class," choose one of the "custom" classes. For the "Template Type," choose "Named Column"
10.) Click the "Create" button
11.) Now that you created a custom row template, go back to "Shared Components" and then to "Templates"
12.) Find your custom template and click on it
CUSTOM TEMPLATE HOW TO
1.) In the "Row Template 1" textbox, you are going to create some custom css that will display the data on the page. The css to make the report look like the report above would be:
<div style = text-align: justify">
<table>
<tr>
<td style = "width: 200px"><b>First Name: #1#</b></td>
<td style = "width: 225px">&nbsp</td>
<td style = "width: 215px"><b>Employee Id: #2#</b></td>
<tr>
<td style = "width: 200px">Last Name: #3#</td>
<td style = "width: 225px">&nbsp</td>
<td style = "width: 215px">Company Credit Card Number: #4#</td>
<tr>
<td style = "width: 200px">MI: #5#</td>
<td style = "width: 225px">&nbsp</td>
<td style = "width: 215px">Social Security Number: <b>#6#</b></td>
</tr>
</table>
<p style = "page-break-after: always">----------------------------------------------------------------</p>
</div>
{code}
As you probably figured out, the numbers between the two pound signs ("#") are substitution strings for the variables in your select query in the SQL report. As you have also probably noticed, the "page-break-after: always" line will always make it so that only one report is shown on a page. To fix this, we will need to use logic and row template 2.
2.) For the "Row Template 1 Condition," select "Use Based on PL/SQL Expression" from the select list.
3.) In the textbox for the row template 1 expression enter in the following: {code}substr('#rownum#',-1) = 0 or substr('#rownum#',-1) = 5{code}
***** This condition will make sure that this template is applied when the last digit in the row number is either a "0" or a "5." So, only 5 reports will be displayed per page.
4.) Now go down to "Row Template 2" and enter in the following in the textbox:
{code}
<div style = text-align: justify">
<table>
<tr>
<td style = "width: 200px"><b>First Name: #1#</b></td>
<td style = "width: 225px">&nbsp</td>
<td style = "width: 215px"><b>Employee Id: #2#</b></td>
<tr>
<td style = "width: 200px">Last Name: #3#</td>
<td style = "width: 225px">&nbsp</td>
<td style = "width: 215px">Company Credit Card Number: #4#</td>
<tr>
<td style = "width: 200px">MI: #5#</td>
<td style = "width: 225px">&nbsp</td>
<td style = "width: 215px">Social Security Number: <b>#6#</b></td>
</tr>
</table>
<p>----------------------------------------------------------------</p>
</div>look familiar? that is because it exactly the same code as above, except without the page-break-after piece.
5.) For the "Row Template 2 Condition," select "Use Based on PL/SQL Expression" from the select list.
6.) In the textbox for the row template 2 expression enter in the following: substr('#rownum#',-1) != 0 or substr('#rownum#',-1) != 5***** This condition will make sure that this template is applied when the last digit in the row number IS NOT a "0" or a "5."
7.) Scroll down to column headings and enter this in the textbox for the "Column Heading Template": OMIT
8.) Click the "Apply Changes" button
9.) Now go back to your application and the page you want to apply the custom report to
10.) On the report, click on the report tab
11.) Scroll down to "Layout and Pagination"
12.) Click on the "Report Template" select list
13.) Select your custom template
14.) Click the "Apply Changes" button and run the page
Try printing the report, if it does not print correctly, try it in Opera, Safari, Internet Explorer, Firefox, and Google Chrome. Please note that it is my understanding that only Firefox does not understand the css "page-break-after: always"
If needed, add some css to the page to hide tabs and other items when you print.
~Andrew Schulltz

DOH. Too much copy/paste.
In my code, I was setting an application variable to contain the email address I was retrieving from AD. Once commented out, it worked fine.
          IF l_attr_name = 'mail' THEN
             APEX_UTIL.SET_SESSION_STATE('F111_USER_EMAIL',l_vals(i));
          END IF;

Problem with JQuery tab after migrated to APEX 4.0

My test application hosted on apex.oracle.com is using JQuery tab function and it is running well with APEX 3.2.1.
And now after the migration to APEX 4.0, it can not display the tab anymore.
Any idea how to solve this problem?
Thanks a lot.

<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com">
<head>
<title>#TITLE#</title>
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_15/theme_3_1.css" type="text/css" />
<style type="text/css">
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
/* Layout helpers
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
.ui-state-disabled { cursor: default !important; }
/* Icons
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Lucida%20Grande,%20Lucida%20Sans,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=02_glass.png&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
/* Component containers
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }
/* Interaction states
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #c5dbec; background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #2e6e9e; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #2e6e9e; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #79b7e7; background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1d5987; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #1d5987; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #79b7e7; background: #f5f8f9 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #e17009; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #e17009; outline: none; text-decoration: none; }
/* Interaction Cues
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fad42e; background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
/* Icons
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }
/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
.ui-corner-tr { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.ui-corner-br { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.ui-corner-top { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.ui-corner-right { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.ui-corner-left { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.ui-corner-all { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }/* Accordion
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
.ui-accordion .ui-accordion-content-active { display: block; }/* Datepicker
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }
/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
display: none; /*sorry for IE5*/
display/**/: block; /*sorry for IE5*/
position: absolute; /*must have*/
z-index: -1; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}/* Dialog
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/* Progressbar
.ui-progressbar { height:2em; text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/* Resizable
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Slider
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
</style>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-ui.js"></script>
#HEAD#
</head>
<body #ONLOAD#>#FORM_OPEN#

How to create a Shuttle box in Apex with simple copy and move option..

I want to create a shuttle box in Apex with simple copy option. the demo application I downloaded from oracle had a two level selection query option which I dont need and was not even compatible with my version. All I need is a way to shuttle single query values between two multiple select lists. I could not find any demo.
My Apex version 2.1 with XE
query : select distinct fieldid d, fieldid r from field order by 1
What kind of buttons do I need.. ? submitting or url redirecting ?

Hello,
>>
The demo is not working in my apex 2.1 as I mentioned in the post.
>>
Not working is not enough of a description to help you out. I assume that what you mean is it won't install into XE since the demo was built in 2.2 and uses some 2.2 specific technology for the install.
The way to get around that issue like I said was to get a free workspace on apex.oracle.com install the demo application there and then using some cutting and pasting recreate the demo app in your XE instance.
Carl

Creating a simple image application in Apex

select
"IMAGE_ID",
<img src="#OWNER#.deliver_thumbnail?p_image_id='||IMAGE_ID||'"/> thumbnail,
"FILENAME" from "ORDIMAGE_IMAGES"
where
instr(upper("FILENAME"),upper(nvl(:P1_REPORT_SEARCH,"FILENAME"))) >
Its is showing an error
showing only the coding part when i run the application instead of showing image....
can you please help me rectify the error
Edited by: 880021 on 17-Aug-2011 20:58

Creating a simple image application in Apex
Create a new application from scratch. Name it ORDImages_images.
Add a Report and Form Page based on your ORDImage_images table. Ensure that you select a Classic Report (i.e. not Interactive, which is the default). As expected, two pages are created.
Continue to create the application and then run it.
After the login page, there will be spurious entries for image and thumbnail.
This is expected because of the ORDImage columns in the images table.
Edit Page 1 and open the Images Region
The Source entry is
select
"IMAGE_ID",
"IMAGE",
"THUMBNAIL",
"FILENAME"
from "ORDIMAGE_IMAGES"
where
instr(upper("FILENAME"),upper(nvl(:P1_REPORT_SEARCH,"FILENAME"))) > 0
In SQL Developer, create the deliver_images_thumb procedure
CREATE OR REPLACE PROCEDURE deliver_thumbnail(p_image_id IN NUMBER) IS
l_thumbnail ORDSYS.ORDImage;
BEGIN
-- Fetch the thumbnail from the database
SELECT thumbnail
INTO l_thumbnail
FROM ORDImage_images
WHERE image_id = p_image_id;
-- Check update time if browser sent If-Modified-Since header
IF ordplsgwyutil.cache_is_valid( l_thumbnail.getUpdateTime() )THEN
owa_util.status_line( ordplsgwyutil.http_status_not_modified );
RETURN;
END IF;
-- Set the MIME type and deliver the image to the browser.
owa_util.mime_header( l_thumbnail.mimeType, FALSE );
ordplsgwyutil.set_last_modified( l_thumbnail.getUpdateTime() );
owa_util.http_header_close();
IF owa_util.get_cgi_env( 'REQUEST_METHOD' ) <> 'HEAD' THEN
wpg_docload.download_file( l_thumbnail.source.localData );
END IF;
END;
Then
GRANT EXECUTE ON deliver_thumbnail TO PUBLIC;
Return to Apex and change the Source entry to
select
"IMAGE_ID",
'<img src="#OWNER#.deliver_thumbnail?p_image_id='||IMAGE_ID||'"/>' thumbnail,
"FILENAME" from "ORDIMAGE_IMAGES"
where
instr(upper("FILENAME"),upper(nvl(:P1_REPORT_SEARCH,"FILENAME"))) > 0
Apply changes and run the application
You can now search on substrings of filenames. Note that the image_ID is not shown. To rectify this, Edit Page 1 and open Report in Regions.
Edit the image_id and under Column Link, change the Link Text to #IMAGE_ID#. Also change the Heading in the Column Attributes to Image ID.
Apply the changes and re-run.
Clicking on the image_id link takes you to Page 2 – the form for that image.
Page 2 is sparse so reveal the image_id by Editing Page 2 and opening the P2_IMAGE_ID Page Item. Change Display as Hidden to Text Field. Apply changes and re-run.
In Page Items, open and delete the P2_THUMBNAIL item.
Open the P2_IMAGE item.
Under Name, change the Display As entry to Display Image (from the select list).
Under Settings, change the Based On entry to BLOB Column returned by SQL Statement
Enter
SELECT i.image.source.localdata
FROM ORDimage_images i
WHERE image_id = :P2_IMAGE_ID
as the SQL Statement
Apply changes and re-run the application
Making an image clickable
Edit Page 1 and open Report in Regions. Edit THUMBNAIL and under Column Link, insert
<img src="#OWNER#.deliver_thumbnail?p_image_id=#IMAGE_ID#"/>
as Link Text.
Select Page 2 as the Target Page in this Application.
Finally, set Item 1's name to P2_IMAGE_ID and its Value to #IMAGE_ID#
Removing the Spreadsheet link
Under Report Attributes, set Enable CSV Output to No

Standard jQuery tabs and an interactive report as a "tab" sub-region

Hi all,
I have a standard, simple implementation of jQuery tabs following the exact instructions by Patrick via this thread:
Re: New themes in APEX 4 not working with JQuery tabs
As one of the "tabs" (sub-regions), I want an interactive report. I use "no template".
Problem is that when the IR is in a tab, the pop-up column menus and such are no longer aligned, e.g. I click one of the column headers of the IR and the pop-up menu shows up much lower on the screen than it should -- sometimes off the screen if I have another region above. Can anyone assist? Maybe it's a DIV tag conflict between the jQuery template and the built-in IR?
Here is my example app:
http://apex.oracle.com/pls/apex/f?p=19782:1
Also another issue I've never seen quite resolved -- on "tab2" in the above app, you see what happens when you actually use a template in the sub-region. It breaks off the encompassing parent tab.
Sorry, if I was more savvy in the display options, I could probably solve all this -- so I'm hoping somebody else is or has already solved it and can share. Thanks so much!
David

If anyone is interested, I finally found the answer to this issue. It's all here:
http://www.apex-blog.com/oracle-apex/using-jquery-to-fix-broken-apex-interactive-report-drop-down-menus-150.html
Very special thanks to Stephen Blair (who owns the blog above) for the simple solution! Thanks Stephen!
David

JQuery Tabs

I am trying to use JQuery tabs in my application. I have got them working but have hit a snag that I cannot seem to get passed.
All my tabs contain reports with links to other pages. I f I click on a tab and then on a edit link I go to another page. When I return to my tab page, it defaults to the first tab (ie first tab is always active). I need the last tab clicked to be the active one.
On advice I installed the jquery.cookie.js and added this code in my page header, but to no avail.
<script type="text/javascript" src="&JAVASCRIPT_DIR.jquery/jquery-1.3.2.js"></script>
<link type="text/css" href="&CSS_DIR.jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="&JAVASCRIPT_DIR.jquery/jqueryui/jquery-ui-1.7.2.custom.js"></script>
<script type="text/javascript" src="&JAVASCRIPT_DIR.jquery/jqueryui/jquery.cookie.js"></script>
<script type="text/javascript">
$(function() {
$tabs = $("#tabs_start_reg");
$tabs.tabs( {collapsible: true });
$tabs.parents('td').eq(0).removeAttr('width');
$tabs.show();
$tabs.tabs({ cookie: { expires: 30 }});
</script>
I have tried playing around for a while but no success.
Any ideas appreciated
Gus

I have simple solution on my tab page:
Before tabs i have:
<div id="contentBody">
<ul>
<li><a href="#name1"><span>name1</span></a></li>
<li><a href="#name2"><span>name2</span></a></li>
<li><a href="#name3"><span>name3</span></a></li>
<li><a href="#name4"><span>name4</span></a></li>
</ul>
and after:
</div>
when linking to page just add #name4 to your link if you want to display last tab
apex.dbe.pl
Piotr Jasiński

JQuery tabs: cookie and "selected" wont work together

I am using jQuery tabs with six tabs to show a bunch of reports, with a few reports on each tab. I am using the jQuery cookie plugin to remember the tab - this works ok. Page submit is slow because all reports are refreshed unconditionally each time a submit is called. I want to add a condition so that only the report on the currently selected tab is refreshed. Ideally, I want to maintain the tab# in a hidden item and create a condition for each report (or region) to only display when it's tab is selected.
Jari's blog article shows how to assign the tab number to a page item
http://dbswh.webhop.net/dbswh/f?p=BLOG:READ:0::::ARTICLE:195800346705831
But using "selected" seems to break the cookie: after changing the tab (and correctly updating the page item), the next submit changes the tab to the prior one selected. I cannot get both to work at once. I never want to reset the selected tab from the one in the cookie ; I only want to save the selected tab#. Users can only change tabs by clicking on a tab. I am not much of a javascript developer so it is likely to be something trivial.
This is my page header javascript - you can see where I've added a chunk of Jari's code.
<script type="text/javascript">
//<![CDATA[
   $(function(){
   $tabs = $("#PANE_1_T");
   $tabs.tabs({
       selected:'&P17000_SELECTED_TAB.',
       select:function(e,u){
        var a=new htmldb_Get(null,&APP_ID.,"APPLICATION_PROCESS=DUMMY",&APP_PAGE_ID.)
        a.add("P17000_SELECTED_TAB",u.index);
        var r=a.get();
    $tabs.tabs({ cookie: { expires: 1}});
    $tabs.parents('td').eq(0).removeAttr('width');
    $tabs.show();
//]]>
</script>(Apex 3.2.1)
What am I doing wrong?
Any help appreciated!
Mark Teehan, Singapore

Hi,
If you submit/reload page you can not set condition that only one report is "refreshed".
When you submit and page reloads again all regions are loaded what you have on page.
Of course you can set condition that all regions are not shown, but as I understand you are not looking for that.
In Apex 3.2, you could call $a_report function to partial page refresh only one report.
Or use various other JavaScript and Ajax method to refresh only one report.
And as I understand, you have same info in cookie and item if you could use those in same time. Why not just use that item? Then you do not need load cookie plugin.
You could change code
   $tabs.tabs({
       selected:"&P17000_SELECTED_TAB.",
       select:function(e,u){
        var a=new htmldb_Get(null, &APP_ID., "APPLICATION_PROCESS=DUMMY", &APP_PAGE_ID.)
        a.add("P17000_SELECTED_TAB", u.index);
        var r=a.get();
       $s("P17000_SELECTED_TAB", u.index);
     });To set item value also in HTML document so you can access it easily using JavaScript.
Below part is change and set item value in HTML document
$s("P17000_SELECTED_TAB", u.index);Regards,
Jari

How to add sub menus in dreamweaver CC using Jquery Tabs

How can I add sub menus to a Menu Bar in DreamWeaver CC. I know how to do it in CS6 using Spry Menu bar but it's just not as simple as that was now in CC.
Any Help is appreciated!!

jQuery tabs is a replacement for Spry tabs, not the Spry menubar.
Stella333 found a good replacement for the Spry menubar http://forums.adobe.com/thread/1247870

Creating and displaying Varrays in Apex 4.1

Hi,
I am creating quite a sophisticated database, which has to support relations between different tables. In order to implement that, I've decided to use user-defined datatype - a varray which consists of 100 integers (and only of that) that will contain ID's to different rows in different tables. Since it is a user-defined datatype I have problems with using it in Application Express :)
First question: Is there any way to make this simple datatype 'readable' for Apex? In each application I create it shows that it is 'an unsupported datatype'. Maybe I should define something more than just varray construction - the way Apex should read and edit it etc ?
Second question: How can I implement a function that will read the IDs in the varray and transform them into names to which that IDs correspond? I would like an application to show full name of an organization (ex. "ABC Corporation") instead of its ID. I tried to put some part of code that takes up the name of an organisation in a row with given ID into +"Source"+ form in the +"Edit page item"+, however Apex doesn't seem to get the fact that the data is in different table. Any ideas? :)
I will be grateful for any help since it is an urgent case :]

KamilGorski wrote:
I would happily do that if only I had more time to study SQL and learn it properly :) Unfortunately, our start-up company has no time and money at the moment to allow me to do so.Then isn't using technologies that no one knows rather a strange decision?
But coming back to your solution - it still works only if user inputs only one product quality. Let's say that user has chosen 3 qualities and the 'SELECTED_QUALITIES' collection looks like that:
n001 = 1,
n002 = 3,
n003 = 5
And since the SELECT query you have created compares pq.quality_id only to n001, it returns all the products that have the quality no 1 - not all the products that have all three selected qualities - 1, 3 and 5. Of course, we can change the 'EXISTS' condition and add more 'OR' conditions like that:
where pq.quality_id = q.n001
or pq.quality_id = q.n002
or pq.quality_id = q.n003But it has few flaws - first we assume that we know the number of qualities user has selected - 3 (and we don't know that), You've misunderstood. SQL is row based. To handle multiple values, we create more rows, not additional columns. In your preferred terms, the result of any query is an <i>m</i>×<i>n</i> array of columns and rows, where the number of columns <i>m</i> is fixed, and the number of rows <i>n</i> varies according to the query predicates.
It is not necessary to know the number of selected qualities, simply create a row in the collection for each selected quality to give a set of selected qualities.
The SELECTED_QUALITIES collection should look like:
N001
   1
   3
   5
secondly the query will return all the products that have one of the three selected qualities (and we want products that have all three qualities). That wasn't really clear from the information previously given, but it's certainly possible. With <tt>product_qualities(product_id, quality_id)</tt> as a primary/unique key, and with no duplicates in the selected qualities, a solution is the set of all products with the selected qualities, where the number of qualities matched for each product equals the number of qualities selected, as in this example:
SQL> create table products (
2      product_id    integer       primary key
3    , product_name varchar2(30) not null);
Table created.
SQL> create table qualities (
2      quality_id    integer       primary key
3    , quality_name varchar2(30) not null);
Table created.
SQL> create table product_qualities (
2        product_id integer   not null references products
3      , quality_id integer   not null references qualities,
4      constraint product_qualities_pk primary key (
5            product_id
6          , quality_id))
7    organization index;
Table created.
SQL> create index product_qualities_ix2 on product_qualities (
2      quality_id
3    , product_id);
Index created.
SQL> insert all
2    into products (product_id, product_name) values (1, 'widget')
3    into products (product_id, product_name) values (2, 'thingummy')
4    into products (product_id, product_name) values (3, 'whatsit')
5    into products (product_id, product_name) values (4, 'gizmo')
6    into products (product_id, product_name) values (5, 'gadget')
7    into products (product_id, product_name) values (6, 'contraption')
8 select * from dual;
6 rows created.
SQL> insert all
2    into qualities (quality_id, quality_name) values (1, 'green')
3    into qualities (quality_id, quality_name) values (2, 'silver')
4    into qualities (quality_id, quality_name) values (3, 'shiny')
5    into qualities (quality_id, quality_name) values (4, 'furry')
6    into qualities (quality_id, quality_name) values (5, 'digital')
7    into qualities (quality_id, quality_name) values (6, 'hd')
8    into qualities (quality_id, quality_name) values (7, 'wireless')
9 select * from dual;
7 rows created.
SQL> insert all
2    into product_qualities (product_id, quality_id) values (1, 1)
3    into product_qualities (product_id, quality_id) values (1, 3)
4    into product_qualities (product_id, quality_id) values (2, 2)
5    into product_qualities (product_id, quality_id) values (2, 4)
6    into product_qualities (product_id, quality_id) values (3, 1)
7    into product_qualities (product_id, quality_id) values (3, 3)
8    into product_qualities (product_id, quality_id) values (3, 5)
9    into product_qualities (product_id, quality_id) values (4, 2)
10    into product_qualities (product_id, quality_id) values (4, 4)
11    into product_qualities (product_id, quality_id) values (4, 6)
12    into product_qualities (product_id, quality_id) values (5, 2)
13    into product_qualities (product_id, quality_id) values (5, 3)
14    into product_qualities (product_id, quality_id) values (5, 5)
15    into product_qualities (product_id, quality_id) values (6, 1)
16    into product_qualities (product_id, quality_id) values (6, 3)
17    into product_qualities (product_id, quality_id) values (6, 5)
18    into product_qualities (product_id, quality_id) values (6, 7)
19 select * from dual;
17 rows created.
SQL> commit;
Commit complete.For the purposes of creating a quick and simple example outside of APEX, I'm using a temporary table instead of the SELECTED_QUALITIES APEX collection. For various reasons collections work better in APEX than GTTs and are the preferred approach for temporary storage.
SQL> create global temporary table selected_qualities (
2    n001 integer)
3 on commit delete rows;
Table created.With one quality selected, we get all the products having that quality:
SQL> insert into selected_qualities (n001) values (1);
1 row created.
SQL> insert into selected_qualities (n001) values (1);
1 row created.
SQL> select
2            p.product_id
3          , p.product_name
4 from
5            products p
6           join product_qualities pq
7             on p.product_id = pq.product_id
8           join selected_qualities sq
9             on pq.quality_id = sq.n001
10 group by
11            p.product_id
12          , p.product_name
13 having
14             count(*) = (select count(*) from selected_qualities);
PRODUCT_ID PRODUCT_NAME
      1 widget
      6 contraption
      3 whatsitThese products all have the next quality added, so continue to be returned:
SQL> insert into selected_qualities (n001) values (3);
1 row created.
SQL> select
2            p.product_id
3          , p.product_name
4 from
5            products p
6           join product_qualities pq
7             on p.product_id = pq.product_id
8           join selected_qualities sq
9             on pq.quality_id = sq.n001
10 group by
11            p.product_id
12          , p.product_name
13 having
14             count(*) = (select count(*) from selected_qualities);
PRODUCT_ID PRODUCT_NAME
      1 widget
      6 contraption
      3 whatsitThen as additional qualities are selected, the result set is progressively reduced:
SQL> insert into selected_qualities (n001) values (5);
1 row created.
SQL> select
2            p.product_id
3          , p.product_name
4 from
5            products p
6           join product_qualities pq
7             on p.product_id = pq.product_id
8           join selected_qualities sq
9             on pq.quality_id = sq.n001
10 group by
11            p.product_id
12          , p.product_name
13 having
14             count(*) = (select count(*) from selected_qualities);
PRODUCT_ID PRODUCT_NAME
      6 contraption
      3 whatsit
SQL> insert into selected_qualities (n001) values (7);
1 row created.
SQL> select
2            p.product_id
3          , p.product_name
4 from
5            products p
6           join product_qualities pq
7             on p.product_id = pq.product_id
8           join selected_qualities sq
9             on pq.quality_id = sq.n001
10 group by
11            p.product_id
12          , p.product_name
13 having
14             count(*) = (select count(*) from selected_qualities);
PRODUCT_ID PRODUCT_NAME
      6 contraption

How to create a moving text in APEX forms?

Hi
Can anyone help me with the procedure and the code for creating a moving text in APEX.
Thanks in advance.

marquee was introduced with IE (Internet Explorer) and certain versions of Firefox, Opera, Chrome and Safari web browsers support it.
tell me how do you want the text to work. the easiest way will be to create an HTML region and put the marquee tag code in it
if you fear about the compatibility of marquee with browsers or have a browser version with which marquee does not work then use JQuery
check the following
http://plugins.jquery.com/marquee/
let me know if this answers your query in the current thread
Regards,
Vishal
Oracle APEX 4.2 Reporting | Packt Publishing
Vishal's blog

Creating an image gallery in apex....

Hi,
Im using Apex version 4.2.6... I followed the instructions in a blog to create an image gallery in apex applications....
http://apex-notes.blogspot.com/2008/12/build-image-gallery-using-apex.html
I have created all process by following that blog... But the pikachoose plugin is not available to download....
Is there is any other plugin or any other alternate way to create an image gallery in apex???
Thanks
Infant raj

HI,
Is there is any example for creating an image gallery... Went through on your link, i want to use the images that are stored in the table.....
Please advise me on application where i need to use this scripts...
jQuery plugin setup
The blueimp Gallery jQuery plugin registers a global click handler to open links with data-gallery attribute in the Gallery lightbox.
To use it, follow the lightbox setup guide, but replace the minified Gallery script with the jQuery plugin version and include it after including jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.blueimp-gallery.min.js"></script>
Next, add the attribute data-gallery to your Gallery links:
<div id="links"> <a href="images/banana.jpg" title="Banana" data-gallery> <img src="images/thumbnails/banana.jpg" alt="Banana"> </a> <a href="images/apple.jpg" title="Apple" data-gallery> <img src="images/thumbnails/apple.jpg" alt="Apple"> </a> <a href="images/orange.jpg" title="Orange" data-gallery> <img src="images/thumbnails/orange.jpg" alt="Orange"> </a> </div>
Thanks...
INFANT

Creating simple jquery TABS in apex

Similar Messages

Maybe you are looking for