JavaScript / DHTML Tabs - APEX 2.2

Is there a built-in way in APEX to do this :
http://www.barelyfitz.com/projects/tabber/
Or do I just have to do it the old-fashioned way by writing my own scripts?
Thanks!

Hello,
You have to roll your own but we do have some helper functions. to ease the pain.
Unfortunately it's been so long since I've see a 2.2 instance I'm not sure what they are called. But you need to look for something like
$x_HideAllExcept
or
$d_TabClick
If your in 3.0 $d_TabClick would be the way to go it can build that html structure in one line of js and you could build your tabs using on of the APEX views to query your regions, so that when you add a new region a tab would appear.
Regards,
Carl
blog : http://carlback.blogspot.com/
apex examples : http://apex.oracle.com/pls/otn/f?p=11933:5
Message was edited by:
Carl Backstrom

Similar Messages

JavaScript for TAB in WAD

I have the following code to switch from one web Item to another, but I have more than one webItem that I want to be displayed at the same time, but I couldn't make both displayed at the same time, could someone please tell me if that is possible.
http://help.sap.com/saphelp_nw04/helpdata/en/65/c54a7e1a1b584589d238ba188df053/frameset.htm
switching is fine, but need to add more than one webitem to each tab.
thanks in advance.
Wond

I have this code, which is a copy of the link I have. Then in one template, I put a Chart and Table, which is assigned to TAB1 but theTAB2 has only tables. By default, TAB1 gets dispayed and once I clicked on TAB2 and get back to TAB1, only the graph gets displayed.Someone, please tell me if you had exprience with this.
thanks.
Wond
<script type="text/javascript">
/* function goto_tab: Show all items, starting with tabname, Hide all other items */
          function goto_tab(tabname) {
              SAPBWOpenURL(SAP_BW_URL_Get()'&item=TAB*&multi=X&hidden=X&cmd_1=item%3d'tabname+'*%26hidden%3d %26multi%3dX');
/* DHTML function to set correct span-Tag visible
    For each Tab in Tab-Header (head_TAB) check, if item TABx is visible
    If Item is visible set Header as selected
    Otherwise set corresponding span-Tag to not visible */
          function set_actual_tab() {
            i=0;
            do {
                 i++;
                 if (document.getElementById('head_TAB'+i) != null) {
                    /* Check if Object tag is hidden */
                    var prop = SAPBWGetItemProp('TAB'+i);
                    var hidden=true;
                    if (prop != null){
                                 for(j=1;j<prop.length;j++){
                                          if (prop[j][0] == "HIDDEN") hidden = (prop[j][1]=='X');
                    if (hidden) {
                                document.getElementById("TAB"+i).setAttribute('style', 'display:none;visibility:false;',false);
                   else {
                               document.getElementById("head_TAB"+i).setAttribute('className', 'SAPBEXTbsTABsel',false);
          } while (document.getElementById('head_TAB'+i) != null)
       -->
</script>
<object>
         <param name="OWNER" value="SAP_BW"/>
         <param name="CMD" value="GET_ITEM"/>
         <param name="NAME" value="TAB1"/>
         <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_TEMPLATE"/>
         <param name="CAPTION" value="My Tamplate Discription"/>
         <param name="TEMPLATE_ID" value="My_TEMPLATE_NAME"/>
         ITEM:            TAB1
</object>
<object>
         <param name="OWNER" value="SAP_BW"/>
         <param name="CMD" value="GET_ITEM"/>
         <param name="NAME" value="TAB2"/>
         <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_GRID"/>
         <param name="DATA_PROVIDER" value="DATAPROVIDER_3"/>
         <param name="HIDDEN" value="X"/>
         ITEM:            TAB2
</object>
<script type="text/javascript">

</script>

Problem with javascript onload in apex page

I want to run some javascript in APEX when the user loads the page, but I am having trouble getting the onload function to work. I’m new to javascript so it’s probably a simple mistake on my part .
All I want to do is to change the background colour of a field (P5_GRPT) depending on the value of another field (P5_MIN_DAYS). I just want to get something basic that works then I can build on it and make it more elegant/generic, but at the moment the script below appears to have no effect whatsoever. Any help would be much appreciated. I have set the cursor focus attribute to “do not focus cursor” (Apex version 3.01.00.12)
Page header html:
<script type="text/javascript">
Function trafficlight()
c = document.getElementById("P5_MIN_DAYS").value;
switch(c)
case 1:
$x("P5_GRPT").style.backgroundColor = "green";break;
case 2:
$x("P5_GRPT").style.backgroundColor = "yellow";break;
default:
$x("P5_GRPT").style.backgroundColor = "red";break;
</script>Page html body:
onload="trafficlight();"

hi
I'm new in apex 3.2 javasrcript and speak spanish
i have function in html header
<script language="JavaScript" type="text/javascript">
function colorSal(pCol){
var elms=document.getElementsByname(pCol);
for (i=0; i< elms.length; i++){
if (elms.value < 1500){
elms[i].style.backgroundColor ='yellow';
</script>
and on body header:
onload="colorSal ('f07');"
This should change color column seven of tabular form but it does not happen .
the query in tabular form is
select
"EMPNO",
"EMPNO" EMPNO_DISPLAY,
"ENAME",
"JOB",
"MGR",
"HIREDATE",
"SAL",
"COMM",
"DEPTNO",
"MODIFIED_BY",
"TICKED"
from "#OWNER#"."EMP"
thanks for your help

Rant about Tabs (Apex team please read)

I am really, really tempted to go off on a Dennis Miller style rant about 'Tabs'.
I surely hope this part of Apex is extensively "redone" in future versions, as the current implementation is cumbersome at best; inconsistent and non-intuitive at the least.
First, let me thanks Kostya for his blog (http://proskudin.blogspot.com/2007/06/two-level-tabs.html) that helped me stumble through the process of creating something useable with tabs.
Here's some of the problems/complaints I had and a question or two, starting off with a brief overview of my setup.
I have 29 main data pages that can be grouped into 6 logical categories of data, so I needed 6 parent tabs and 35 'standard' tabs.
1. Please redo the terminology used in both Apex and the documentation for consistency and clarity. I would much prefer something like 'Tabset', 'Parent Tab' and 'Child Tab', as it is readily apparent what the hierarchy is.
2. It wasn't apparent at all that in order to create a 'Tabset' and a 'Parent Tab', I had to first create a 'Standard Tab' (Child Tab). This just seems completely backwards. (Maybe I'm just to old).
3. I named my 'Tabset' "Menu" and I called the first 'Parent Tab' "General". Yet after I discovered Kostya's explanation of how to get tabs working correctly, all of my other 'Parent Tabs' had to use "General" as the 'Parent Tab' instead of just referring to the 'Tabset' as the master. By default, when the other 'Parent Tabs' were created (and no way to specify otherwise), they had their 'Parent Tab' set to null.
4. Would #3 above have been different if I created a 'Child Tab' as the first step in creating each 'Parent Tab'?
5. Under "Edit Parent Tabs", my first 'Parent Tab' wound up having the target set as "f?p=330:300:&SESSION.:". All of the other 'Parent Tabs' have the target set as "f?p=&APP_ID.:1:&SESSION.::&DEBUG.:::" (with the starting page different for each one). Why the inconsistency here?
6. If I do a 'Shared Components', 'Tab's', 'Edit Standard Tabs', and get the grid listing of all of tabs, and then click the 'edit' icon to make some changes, once I click 'Apply Changes' I am returned to to 'Tabs' screen instead of the 'Edit Standard Tabs' screen that I was last on. This behaviour seems inconsistent.
7. Related to above, there are two different 'areas' (or screens) that are called 'Edit Standard Tabs'. One gives you the grid listing of all of the tabs ('Parent Tabs' and 'Child Tabs'), while the other one is the editing of characteristics of an individual 'Child Tab'.
8. On the 'Edit Standard Tabs' grid listing, it sure would be nice to be able to edit the 'Parent Tab' here, it would save a lot of clicking back and forth.
9. On the 'Edit Standard Tabs' individual tab characteristics screen, it would also be nice to have the previous and next arrows to go the other tabs, like what you get when editing page items. This seems another area of inconsistentcy.
10. Improve the documentation/help with fuller explanations and correct the typos. Two I can remember are (though not exactly where) is one case of a 'the the', and another case (I think on the 'Tab Also Current for Pages' help) that says to delimit page numbers with a colon, yet the example provided uses commas.
11. If you click the 'Edit Parent Tabs', all you get is an abbreviated grid listing of some of the characteristics of the 'Parent Tab'. In order to edit (or see) all the characteristics, you must click "Edit Standard Tabs" (or use the graphical selection) to get the 'Edit' icon and then you can edit all of the properties. This seems to be another area of inconsistency.
I think this covers all of the major problems I had (and it seems that others have had the same/similar problems as well). So in summation, quite a few questions here on the forum could be eliminated if the above were corrected/revised in future versions of Apex.
It seems though that if these were corrected/revised in future versions, there would be a problem with existing apps not migrating to the newer version cleanly, so some sort of 'package' would need to be created to take existing tab information and move the current values around into new fields. This is just an assumption I'm making though based upon what I see in the 'Edit Standard Tabs' grid listing. It looks like this is probably based upon a table/view, so it shows how the inconsistcy between the current terms exists.
Thanks for reading this. I was just so frustrated trying to figure these out that I had to vent. This area of Apex is not consistent with the rest of Apex and very confusing and tedious.
Bill Ferguson
Addendum: I am running 3.0.1.00.08 on 11g on Windows 2003 Server.

Hi...even am screwed up completely with these tabs in APEX...been
trying for the past 3 days...but of no use....Can anyone plssss help?
My main requirement of Tabs structure is something like this
Home ( linked to MS page)
- MS page
Customers ( linked to A)
- A
- B
- C
Retailers ( linked to D)
- D
- E
- F
Now I want all these Main Tabs (Home,Customer,Retailers ) to be visible
on all the pages in my application. And when I click on Customers it
should take me to A and all the sub tabs (A,B,C) should appear as
subtabs. ( I want the main tabs (Home,Customer,Retailers ) ) to be
retained in these in all the pages. I want similar tab operations in
all pages.
Can anyone give a detailed procedure of how to go about with this in APEX.The terminolgy used is very confusing..
Thanks in Advance,
Shravanthi

Skillbuilder modal page 2.0 causes a javascript error in APEX 4.2

After installing the Skillbuilder's modal page 2.0 plugin in APEX 4.2, the following javascript error is shown.
Line: 194
Error: Object doesn't support this property or method
Using IE8 debugger the following code seems to be at fault.
function(){apex.jQuery(document).apex_modal_page({
   "transition":"fade",
   "draggable":true,
   "initialHeight":100,
   "initialWidth":300,
   "overlayOpacity":.5,
   "scrolling":true,
   "loadingImageSrc":""
(function(){apex.da.initDaEventList();})();
(function(){apex.da.init();})();
The modal page work flawlessly in APEX 4.1.
Any help will be greatly appreciated.
Thank you,
Del

Check your popup page. You probably have an after-processing branch defined which will redirect to your original page. That is not necessarily bad, although i usually set it to redirect to the same page when using a popup. What will probably not work for you is the success message selector. If you defined "#success-message" as the auto-close selector, this means that the plugin will look for an element on the page in the popup for an element which matches this selector.
- What did you define for auto-close selector
- And on the page you redirect to after-processing of the form, how is the success message defined there
If (IF) you have set #success-message as the auto-close selector, and the popup is not closing, then this would mean that the popup message on the page does not match this selector!

Change from SelectList to Popup LOV, Onchange Javascript breaks. Apex 3.2.1

Hi,
I have a pretty standard piece of Javascript that populates two page items based upon the result of a select list.
I'd like to change the select list to a Pop-Up LOV, but this breaks the functionality.
I presume that I need to use a different var get function, however, have had no luck in trialing different solutions.
Can anyone help?
Details Below.
Regards-
Ronald.
Function Overview:
Select List P4_PRODUCT_ID selects two product parameters: area and item, and puts them into P4_AREA_ID and P4_ITEM_ID.
P4_AREA_ID and P4_ITEM_ID are pop up LOV's and happily accept the text input.
I wish to change P4_PRODUCT_ID to also be a pop up LOV, but when doing so, it breaks the dynamic functionality.
CODE:
Select List: P4_PRODUCT_ID
HTML Form Element Attributes: onchange="pull_multi_value(this.value)";P4 Page Header:
You'll see that I've tried several methods, none worked. Am I using the wrong one?
<script type="text/javascript">

</script> Application Process: Set_Multi_ItemsDECLARE
v_area VARCHAR2 (200);
v_item VARCHAR2 (200);
CURSOR cur_c
IS
SELECT AREA_ID, ITEM_ID
FROM PRODUCTS
WHERE PRODUCT_ID = TO_NUMBER (v ('PRODUCT_ID'));
BEGIN
FOR c IN cur_c
LOOP
v_area := c.AREA_ID;
v_item := c.ITEM_ID;
END LOOP;
OWA_UTIL.mime_header ('text/xml', FALSE);
HTP.p ('Cache-Control: no-cache');
HTP.p ('Pragma: no-cache');
OWA_UTIL.http_header_close;
HTP.prn ('<body>');
HTP.prn ('<desc>this xml genericly sets multiple items</desc>');
HTP.prn ('<item id="P4_AREA_ID">' || v_area || '</item>');
HTP.prn ('<item id="P4_ITEM_ID">' || v_item || '</item>');
HTP.prn ('</body>');
EXCEPTION
WHEN OTHERS
THEN
OWA_UTIL.mime_header ('text/xml', FALSE);
HTP.p ('Cache-Control: no-cache');
HTP.p ('Pragma: no-cache');
OWA_UTIL.http_header_close;
HTP.prn ('<body>');
HTP.prn ('<desc>this xml genericly sets multiple items</desc>');
HTP.prn ('<item id="P4_AREA_ID">' || SQLERRM || '</item>');
HTP.prn ('</body>');
END;

Looking at all that code, I can suggest one way of debugging the issue(Its a bit hard to guess what went in this case,particularly when the problem could be at so many places).
1. Run your PLSQL as an anonymous block and check if the generated XML structure is what you expect.
2. Check Firebug Console (if you have it) if an ajax request is send when the item is changed.
3. Print out the return XML as a string on the screen so that you can make sure it what you wanted(use alert function or append to some page element)
4. Now try your XML parser JS section starting with the obtained XML as a static variable, trying printing out the parsed out values at different stages
5. Setting the page items shouldn't be much of a trouble if everything else worked fine.
Some Observations: If you are on Apex 4.0 wouldn't a Dynamic Action save you all this trouble (Two SetValue processes). Even otherwise you seem to be fetching two id's from the Ondemand process..Can't you just concatenate them with some separator and send that as the result stream(htp.p), handling them in JS would be simple using the split function. If the data is more complex you could return it as a JSON string and parse it with fewer lines of code.
Found a problem with the code :
get.add('PRODUCT_ID',pValue)Do you have a page item by that name(PRODUCT_ID) ? else change it to
get.add('P4_PRODUCT_ID',pValue)and change the following in ur PLSQL process code
PRODUCT_ID = TO_NUMBER (v ('PRODUCT_ID'));to
PRODUCT_ID = TO_NUMBER (v ('P4_PRODUCT_ID'));But as I said earlier, Debugging it step by step might be easier.

Javascript development on Apex - How to show changes on the Javascript on Apex without restarting the web server?

Hi,
I am working on a Javascript for Apex. The changes are not reflected and I was told to restart the app server. Is there a better way for Apex to process the changed Javascript? Thanks.

Hi,
I assume you store JavaScript to web server folder and browser caches your file.
Use query string end of file name like
/my.js?v=0.0.1
And when you change file, change query string value
Templates JavaScript help says:
File reference using a query string in the URL referencing the application version, such that when the application is upgraded
(and the version is incremented), the browser will be instructed to always load the new file and ignore any previously cached files.
/myjs/main.js?version=#APP_VERSION#

JavaScript assign a APEX variable

I have the following javascript code in my page header:
<script language="JavaScript" type="text/javascript">

</script>
Can anyone tell me how to assign a value to :P66_INSERT_FLAG in this routine. If there is more than one way to do it, I would appreciate if you could list them all.
I have a very finicky PDA that will run some javascript and not others. Thanks!
Sharon

Hello,
Unfortinally there is not an 'exact' answer for you as different PDA's/phones have different inital setups and features.
The important thing is what versions of Internet Explorer is running. The mobile versions of Internet Explorer have stripped down versions or some have no javascript functionality at all and some mobile devices turn it off by default.
OS 4.20.0.3.What's this?
Your going to go through each js command on each PDA and see exactly what works and what doesn't on each one, it sounds like javascript might be shut off on one of them, and sometimes you can turn it on. I seem to remember on some versions of mobile IE document.getElementByID() doesn't work and you need to form item notation.
Are you setting just the flag value or do you need to do a full page submit?
If you just need to set the flag value you can use a link that sets the value.
Or make the flag value into checkbox.
Your original code doesn't really do anything other than a submit, can you post the entire code.
function insert_submit()
     var x = '&P66_INSERT_FLAG.';
     confirm(x);
     doSubmit( );
}Finally an working mockup on http://apex.oracle.com would make it much easier to help you out.
Regards,
Carl
blog : http://carlback.blogspot.com/
apex examples : http://apex.oracle.com/pls/otn/f?p=11933:5

Javascript button in APEX 4.0

How could I get a button in APEX 4 that triggers a Dynamic Action without submitting the page.... ??

I know this is an old thread, but I just wanted to update it with details on how you can make dynamic actions trigger based on template buttons being clicked. Currently support for buttons with dynamic actions is definitely not as easy as it should be, something we hope to address in a future release.
But for now, you can do this:
<ul><li>Go with Mark's approach of creating an 'attribute only' button template (with no link) (although you'll need to specify #BUTTON_ATTRIBUTES# not #ATTRIBUTES#). Something like:
<button value="#LABEL#" class="button-alt2" type="button" #BUTTON_ATTRIBUTES#>
<span>#LABEL#</span>
</button></li>
<li>In your button, give it some name, say 'my_button', select that template and in the 'Button Attributes' field you'll need to specify the ID attribute, which can be given the value the same as the button name:
id="my_button"So essentially, you're having to duplicate the naming of the button, both in the button name and the added ID value. Ideally, you would be able to do this in the template, say id="#BUTTON_NAME#" or similar and not need this additional definition, but currently there is no substitution string available for this in button templates. There is #BUTTON_ID# available, but this represents a different set of challenges and I think this approach is the easiest. Note: We have to add this ID, in order for dynamic actions to be able to identify the button.</li>
<li>Note the 'Action When Button Clicked' attributes are irrelevant here, as we've removed the #LINK# placeholder from the button template.</li>
<li>Now you can create the dynamic action to fire based on this button being clicked. Again, you cannot select 'Buttons' specifically from the 'Selection Type' drop down in the 'When' screen of dynamic actions. But if you select the 'Click' event, with a type of 'DOM Object' and a value of 'my_button', then this will now trigger the dynamic action.</li></ul>
Hope this may be of use.
Regards,
Anthony.

Javascript conversions with Apex 1.6

Hi,
I trying to create the feature for
hiding and showing columns using checkboxes.
I found this javascript and it's working fine on
the oracle workspace.
But on my database it's not working since
I have 1.6 installed.
I know things like html_GetElement should be
converted to document.GetElementById
Now my new problem is html_CascadeUpTill.
What's the conversion of that?
Thank you

There are many Javascript enhancements in 2.0 that are more complex than html_GetElement!
Why not just upgrade to 2.0 instead?
Or you could try putting
< script type="text/javascript" src="/i/javascript/htmldb_html_elements.js" >< /script >in your page template/header, that contains most of the basic functions that are necessary for this.

Creating a tab region within a page in APEX

Hi there,
Could someone please guide me to some examples on how i could create a tabbed region within a page?
Thanks

Here is what i do...
In HTML Header I will add the below code
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"> </script>
<script type="text/javascript">
$(function() {
   $("#tabs").tabs();
   $x("tabs").appendChild( $x("tabs-1"));
   $x("tabs").appendChild( $x("tabs-2"));
</script>Then i will Create 3 Region.
Region 1 >>> Create an HTML Region ( REGION TEMPLATE = NO TEMPLATE) and add the below code in REGION SOURCE
<div id="tabs">
<ul>
   <li><a href="#tabs-1">Employee</a></li>
   <li><a href="#tabs-2">Chart</a></li>
</ul>
</div>Region 2 >>> Create HTML Region... Add two text field to this region .. now edit the region
Add the below code in region header of REGION 2
<div id="tabs-1">Add the below code in region footer of REGION 2
</div>Region 3 >>> Create HTML Region... Add two text field to this region .. now edit the region
Add the below code in region header of REGION 3
<div id="tabs-2">Add the below code in region footer of REGION 3
</div>Example : http://apex.oracle.com/pls/apex/f?p=12060:7
I have used exactly the same code... except that my Region 2 contains REPORT insted of two text field and Region 3 contains CHART instead of text field.
Regards,
Shijesh
Please reward the answer if it was helpful / correct

Find which tab is clicked in jQuery using Apex - Conditional Item Display

Hi,
I am using jQuery tabs in my apex page see code below:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"> </script>
<script type="text/javascript">
$(function() {
   $("#tabs").tabs();
   $x("tabs").appendChild( $x("tabs-1"));
   $x("tabs").appendChild( $x("tabs-2"));
</script
<div id="tabs">
<ul>
<li><a href="#tabs-1">Sample Tab1</a></li>
<li><a href="#tabs-2">Sample Tab2</a></li>
</ul>
</div>I would like to display a button (example a button called sample2) at the bottom of a tabbed region Sample Tab2 based on a condition i.e. only if Sample Tab2 is clicked or in focus. Could someone please guide me on how i could implement this using a condition on the actual button "sample2"?
Thanks and appreciate any kind of help!
Cheers.

Hi,
Thanks for the information. I placed the following code on one of the page regions in my apex application:
$("#tabs").tabs({
    select: function(event, ui){
      if(ui.index == 1){
       // do stuff here e.g. show button because Sample Tab2 is selected
        $('#CANCEL').hide();
      }else{
       // do stuff here e.g. hide button because Sample Tab2 is not selected
        //alert("anothertext");
});I am using the following code to hide the button upon click on the second tab within the page:
$('#CANCEL').hide();I have a cancel button with the name "CANCEL".
However, this is not working properly. I am new to Apex and jQuery could someone please guide me further with this?
Thanks very much.
Cheers.

APEX application problem with Apple's Safari browser

Hello Everyone,
I'm working on Apple Safari (version 4.0.5) with Oracle APEX 4.0, the APEX development environment is working fine, but when we try to run our application, after login, while switching tabs, our application hangs with the following URI in the browser
xxx.xxx.x.xxx/apex/wwv_flow.accept
and page is rendered blank, even the page source view is blank.
Our page also carry some JQuery related code functionality, along with regular HTML and Stylesheet.
No idea what is causing this behavior?
Our application is running smooth with browsers like IE, FF, Opera.
Sample applications provided in-bundled with APEX 4.0, are running good on Safari as well.
So kindly suggest, what could be the possible reason behind this?
Regards,
Krishna

Hi Patrick,
Yes, I'm using my own custom made theme also involved JQuery javascripts & functionality on apex pages.
I'm using Safari 4.0.5, didnt checked with the latest version yet.
Yes I've tried it on Google Chrome, its working fine, except with the already know issue, that on each page's post-back, chrome prompts for the XDB Username and Password, which is also a very major issue with my application.
I've gone through various threads from OTN to look out for the possible fix to this issue, but not helpful so far. Have tried few alternatives suggested on OTN, after which landed up in more complex issues causing my application to prompt XDB credentials on all the browsers. Now some how have brought the application back to the previous state, with the help of OTN indeed. Presently my application execute fine with IE, FF & Opera, except Safari & Chrome (XDB credentials prompt).
It would be really not an easy task for me to replicate the same scenario on apex.oracle.com, because it involves various database tables too.
I'm wondering, you asked me the 'theme' subject for the issue, kindly would you please educate me more, how themes can cause an improper functionality on Safari and not in rest of the browsers?
Thank you so much Patrick, I'm partially relieved knowing that you responded me. Great pleasure learning from you.
Regards,
Krishna

Problem with JavaScript code in Page Attributes, modal popup...

Hello all!
I'm encountering a problem with a modal popup I wrote in JavaScript.
h3.
The situation*
A user sees an interactive report with rows that are clickable, so these rows are links. Upon clicking the name of something in a row, some items get a certain value and a modal popup shows on the screen. In this modal popup, there are details regarding that particular row the user has clicked, but the problem_ here is...
The modal popup closes itself only seconds after it has been opened.
This must be because I've probably made a mistake somewhere in my code, but I just can't figure out where... It also appears that when I click on a row link, the popup shows, but the progress bar of my toolbar seems to show a loading bar (as if I refreshed the page).
h3.
My code*
This code is located in the _"Function and Global Variable Declaration"_ part, under the _"JavaScript"_ tab. Code is in the _"Page Attributes"_ of my page 24.
function showhide(x){
$x('REGION1').style.display = ( x == 'REGION1') ? 'block' : 'none';
$x('REGION2').style.display = ( x == 'REGION2') ? 'block' : 'none';
$x('REGION3').style.display = ( x == 'REGION3') ? 'block' : 'none';
$( function(){
$('#ModalForm').dialog(
     modal: true,
     autoOpen: false,
     width: 500,
     height: 350,
     buttons:{ Close: function(){closeForm();}
function openForm()
    $('#ModalForm').dialog('open');
function closeForm()
    $('#ModalForm').dialog('close');
    $(document).ready(function() {
        $('a.temppop').click(function() {
            openForm();
    });This code is located in the _"Header Text"_ part, under the _"Header"_ tab. Code is in the _"Page Attributes"_ of my page 24.
<link rel="stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"> </script>This code is located in the _"Column Link"_ part, you get there by going to the _"Report Attributes"_ of the region called _"Template overview"_ on page 24. This region is an interactive report.
Link Text: #FOODTEMPLATENAME#
Link Attributes: class="temppop"
Target: Page in this Application
Page: 24
Item 1, name: P24_MEALID; item 1, value: #MEALTYPEID#
Item 2, name: P24_TEMPLATEID; item 2, value: #FOODTEMPLATEID#So basically I call the function to open the modal popup by the class name. When a link with that class name in it is clicked, it opens the popup.
To remind you of the problem, the modal popup closes seconds after it has been opened. How do I fix this?
Thanks in advance.
(APEX version 4.1.1.00.23)

Come on guys... I really need to know this. :(

Consuming RESTful web service in Apex app

Hi,
I have created a RESTful Web service through an Apex application (4.0) and published as a public web service. Can someone point me to an example of how to then consume that service in another Apex app? The output is straightforward XML that I can retrieve just by pointing the browser to the URL of the service created, but when I go to create the REST Web Reference for the receiving application, I am not sure what to put for the Response Xpath or Response Namespace. The service is meant to just return report records that were created in the REStful Web service with no input required.
The service XML looks like this:
<ROWSET>
<ROW>
<PROJ_ID>132</PROJ_ID>
<PSL_NETID>xxxxxxxx</PSL_NETID>
<PROJECT_TITLE>11g- Oracle Upgrade to RAC 11g</PROJECT_TITLE>
<CUSTOMER>OIT</CUSTOMER>
<DIVISION>EIS</DIVISION>
</ROW>
<ROW>
<PROJ_ID>132</PROJ_ID>
<PSL_NETID>xxxxxx</PSL_NETID>
<PROJECT_TITLE>11g- Oracle Upgrade to RAC 11g</PROJECT_TITLE>
<CUSTOMER>OIT</CUSTOMER>
<DIVISION>CSS</DIVISION>
Any help would be appreciated.
Thanks,
Pat
Edited by: patfmnd on Dec 7, 2012 3:04 AM

Hi,
I have made progress in this. I created the RESTful report service in an Apex 4.1 application. (previous attempt was with 4.0 version of Apex)
I then created a separate application and created a RESTful web service reference that I tested and it was successful in bringing up XML. However in Apex 4.1, when I create a report following the Wizard for creating a report based on that Web service reference I get the error: ORA-31013: Invalid XPATH expression Which I don't know how to get past. The Xpath provided in the Web service reference test gave output below and brought back a result. There was no where during the Report creation to provide an Xpath. Am I missing something or is 4.1 not quite Web service ready??
This is what I get from the test of the Web service reference in the Apex App from which I want to create a report: (I see in this XML the data I was expecting from the test of the RESTful web service but it looks like the output I get from the Web service test is more like the Report xml itself.)
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com"> <head> <title>Author</title>
 <script type="text/javascript">
//<![CDATA[
var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
//]]>
</script>
<script src="/i/javascript/apex_4_1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
apex.security.framebreaker("D");
//]]>
</script>

<form action="wwv_flow.accept" method="post" name="wwv_flow" id="wwvFlowForm"><input type="hidden" name="p_flow_id" value="140" id="pFlowId" /><input type="hidden" name="p_flow_step_id" value="1" id="pFlowStepId" /><input type="hidden" name="p_instance" value="6146802068150520" id="pInstance" /><input type="hidden" name="p_page_submission_id" value="1940235134399423" id="pPageSubmissionId" /><input type="hidden" name="p_request" value="" id="pRequest" />
<div id="header">
<div id="app-logo"><a href="f?p=140:1:0"></a></div>
<div id="navbar">
<div class="navbar-entry">Logout</div>
</div>
</div>
<div id="tabs">
<div class="frame">
<div class="bg">
<div class="tab-holder">
<div class="first-current">
<div><span>Author</span></div>
</div>
</div>
</div>
</div>
</div>
<div id="topbar">
<div class="breadcrumb-region" id="R170908223330421512">
<div>
<div id="breadcrumbs">
<ul class="breadcrumb-list">
<li class="current">Author</li>
</ul>
</div>
</div>
</div>
</div>
<div id="messages"></div>
<div id="body">
<table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
<tbody>
<tr>
<td class="tbl-main" width="100%">
<div class="rounded-corner-region" id="books">
<div class="rc-blue-top">
<div class="rc-blue-top-r">
<div class="rc-title">AUTHOR</div>
<div class="rc-buttons"><button value="Reset" class="button-gray" type="button" id="B170907622885421490"><span>Reset</span></button></div>
</div>
</div>
<div class="rc-body">
<div class="rc-body-r">
<div class="rc-content-main">
<table id="apex_layout_170907030238421484" border="0" class="formlayout" summary="" role="presentation" datatable="0">
<tr>
<td align="right"><label for="P1_REPORT_SEARCH" tabindex="999"><a class="optional-w-help" href="javascript:popupFieldHelp('170907422375421487','6146802068150520')" tabindex="999">Search</a></label></td>
<td colspan="1" rowspan="1" align="left"><input type="hidden" name="p_arg_names" value="170907422375421487" /><input type="text" id="P1_REPORT_SEARCH" name="p_t01" value="" size="30" maxlength="2000" class="text_field" /></td>
<td align="right"><label for="P1_ROWS" tabindex="999"><a class="optional-w-help" href="javascript:popupFieldHelp('170907508375421490','6146802068150520')" tabindex="999">Display</a></label></td>
<td colspan="1" rowspan="1" align="left"><input type="hidden" name="p_arg_names" value="170907508375421490" /><select name="p_t02" id="P1_ROWS" size="1" class="selectlist">
<option value="10">10</option>
<option value="15" selected="selected">15</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="5000">5000</option>
</select></td>
<td align="left"></td>
<td colspan="1" rowspan="1" align="left"><button value="Go" class="button-gray" type="button" id="P1_GO"><span>Go</span></button></td>
</tr>
</table>
<div id="report_170907030238421484_catch">
<table cellpadding="0" border="0" cellspacing="0" summary="" id="report_books">
<tr>
<td></td>
</tr>
<tr>
<td>
<table cellpadding="0" border="0" cellspacing="0" summary="" class="report-standard">
<tr>
<th id="AUTHORID" class="header">
<div class="rpt-sort">Authorid<img align="absmiddle" src="/i/arrow_up_gray_dark.gif" width="13" height="12" alt="Sort by this column" /></div>
</th>
<th id="LNAME" class="header">
<div class="rpt-sort">Lname</div>
</th>
<th id="FNAME" class="header">
<div class="rpt-sort">Fname</div>
</th>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">A100</td>
<td headers="LNAME" class="data">AUSTIN</td>
<td headers="FNAME" class="data">JAMES</td>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">A105</td>
<td headers="LNAME" class="data">ADAMS</td>
<td headers="FNAME" class="data">JUAN</td>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">B100</td>
<td headers="LNAME" class="data">BAKER</td>
<td headers="FNAME" class="data">JACK</td>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">F100</td>
<td headers="LNAME" class="data">FIELDS</td>
<td headers="FNAME" class="data">OSCAR</td>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">J100</td>
<td headers="LNAME" class="data">JONES</td>
<td headers="FNAME" class="data">JANICE</td>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">K100</td>
<td headers="LNAME" class="data">KZOCHSKY</td>
<td headers="FNAME" class="data">TAMARA</td>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">M100</td>
<td headers="LNAME" class="data">MARTINEZ</td>
<td headers="FNAME" class="data">SHEILA</td>
</tr>
<tr class="highlight-row">
<td headers="AUTHORID" class="data">P100</td>
<td headers="LNAME" class="data">PORTER</td>
<td headers="FNAME" cla
Edited by: patfmnd on Dec 12, 2012 5:59 PM
Edited by: patfmnd on Dec 12, 2012 6:07 PM

JavaScript / DHTML Tabs - APEX 2.2

Similar Messages

Maybe you are looking for