Customize look of javascript disabled page items

I'm using javascript to enable and disable text field items on a page based on the user's access level and role. I chose to use a script for this because every item on the page is affected, and it seemed easier to maintain and debug by collecting all the logic together. This is working great, however it isn't looking so great. The background and text colors are both grayish and the end result looks like an etch into metal plating. What I would like is for the javascript disable function to look like when I disable it through APEX, a white background text field with grayed text. How can I customize the disabled look?

OK so I've tried your guys' suggestions and here are the results along with some more info.
It looks like APEX sets the attributes for items that are "Disabled, does not save state" as disabled="disabled", but "Disabled, saves state" as readonly="readonly". Not a big deal, I can just fix both styles. However, the problem is the javascript disable function seems to be overriding the CSS style.
My javascript function enableDisableItems() is run onload and has a bunch of lines that conditionally run $x_disableItem('P801_MY_ITEM',true); If I don't run enableDisableItems, I can see my CSS styles. But, if I do run it, the styles go away and I'm left with the old metallic look again. I'm guessing that not only does the javascript change the items' state, but also style. I don't understand why it's doing that or how to stop it...

Similar Messages

Javascript reference page items

I have a popup window (page 3) in which a user chooses 3 values from seperate static select lists (hours, minutes, am/pm).
I want these values to be returned into three seperate text fields on the page underneath (page 1). How do i reference them?
At the moment I am using the following procedure in the header of the popup:
<script language="JavaScript">
function passBack(passVal1, passVal2, passVal3)
opener.document.getElementById("P1_HOURS").value = passVal1;
opener.document.getElementById("P1_MINUTES").value = passVal2;
opener.document.getElementById("P1_AM").value = passVal3;
close();
</script>
When i press a button, i have a URL redirect to:
javascript:passBack('&P3_HOURS.','&P3_MINUTES.', '&P3_AM_PM.');
should i be using the '&XXXX.' format here? I have used this exact procedure for a Report and used '#XXXX#' format and it worked perfectly.
Please help, by tomorow if possible ;)
Thank you,
Scott

Thanks heaps for you quick reply Patrick.
I copy and pasted your code to my button, and no success. When i hover over the button, the bottom of the browser merely says
"javascript:passBack($x("
Not sure what i did wrong.
I had another solution, to make all of the select lists into "select lists with submit", and then have each of them set the appropriate items on page 1.
The items are set, but they do not appear until I manually refresh the page. So I need a button to refresh the page behind the popup, then close the popup (can close easily, but not sure on how to refresh?).
Any help with either method would be a tremendous help,
Thanks again,
Scott

Trouble with using javascript $s function to populate a page item

Hello Oracle APEX Community,
I'm working on a drilldown dashboard page and have been encountering a problem when i try to populate a Text Page Item (hidden or not) using the javascript built in $s function.
The function works great when the data is a number such as dept_id (even if the field type is varchar). However, trying to pass anything which is a text the process fails, except when a value is hard-coded as a parameter for the function. So for example, I have a chart with counts of constituents by state. I would like to populate (filter) a table based on when you click on a bar for a state without having to submit the page. I'm using dynamic actions and a built in javascript function in the SQL for the chart to accomplish this; but again, it works great when I use a varchar field like the FIPS code (i.e. the FIPS for Texas is '48'), but when I try to populate the page item using the state abbreviation 'TX' (again varchar) it fails.
Here's an example of code that works:
SELECT 'javascript:$s("P1_DEPTNO",'||d.deptno||')' LINK,
d.dname LABEL,
sum(e.SAL) sal
FROM emp e, dept d
where e.deptno = d.deptno
group by 'javascript:$s("P1_DEPTNO",'||d.deptno||')', d.dname And here's an example of code that does not work:
SELECT 'javascript:$s("P1_DEPTNO",'||d.loc||')' LINK,
d.dname LABEL,
sum(e.SAL) sal
FROM emp e, dept d
where e.deptno = d.deptno
group by 'javascript:$s("P1_DEPTNO",'||d.loc||')', d.dname However, when I hard code a text value the script works:
SELECT 'javascript:$s("P1_DEPTNO","BOSTON")' LINK,
d.dname LABEL,
sum(e.SAL) sal
FROM emp e, dept d
where e.deptno = d.deptno
group by 'javascript:$s("P1_DEPTNO","BOSTON")', d.dname
ORDER BY d.dname I'm encountering this problem on several versions of APEX: (4.0.2.00.07-local installation) and (4.1.0.00.28-apex.oracle.com)
Does anybody know of this problem and how to solve it? I've looked for settings on the page item itself, and can't figure it out.
I've re-written my sql to utilize the value fields of my tables instead but I have some objects on the page which are really going to depend on the character based data instead.
Thanks,
Wayne

In your javascript you are generating, surround your value with double-quotes and it'll should then always work with both numbers and strings (your strings are probably being interpreted as variable names and they don't exist at runtime, hence erroring out).
Example:
SELECT 'javascript:$s("P1_DEPTNO","'||d.loc||'")' LINK,Edited by: gti_matt on Aug 16, 2011 9:50 AM

Access page item from Javascript

I have searched the forum, and based on my findings this is what I've done so far:
I have a page item where the Google Map key is stored. I want to access it from Javascript so that I can call the Google map with the key. (Note: The key can't be hardcoded as it will be pulled from DB according to the environment/url the app is running on. e.g. - dev, test, production.)
Here's a javascript code block:
<script>
   var google_key = $x('P1_GOOGLE_KEY').value;
   var l_url = "http://maps.google.com/maps?file=api&v=2&key=" +
               google_key +
               "&sensor=false";
</script>I have tried, $v('P1_GOOGLE_KEY') , $x('P1_GOOGLE_KEY') , &P1_GOOGLE_KEY. and none of them work.
How do I access a page item from Javascript?
Thx!
Marc

Marc,
I am going to take a shot in the dark, but are you referencing this item outside of a function in your head tag? So basically it tries to reference the item on load? If so this is not going to work because the item does not exist yet. If you are using jQuery change your code to look like:
$(document).ready(function(){
   var google_key = $x('P1_GOOGLE_KEY').value;
   var l_url = "http://maps.google.com/maps?file=api&v=2&key=" +
               google_key +
               "&sensor=false";
});This will tell the javascript to fire after everything has fully loaded. If you are not using jQuery then you can use a little javascript snippet from here to add a ready event to your page. or you can copy paste this into a script tag.
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn(); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
document.ready(function (){
var google_key = $x('P1_GOOGLE_KEY').value;
var l_url = "http://maps.google.com/maps?file=api&v=2&key=" +
google_key +
"&sensor=false";
Good Luck,
Tyson Jouglet

Filter page items by property in Javascript

What is the Javascript equivalent to this AppleScript?
set xxx to every page item whose note = "John"
After looking at some of the tutorials, I pieced this together. Is there a better way of doing this? With 30,000 path items it took over a minute to execute...
docRef = app.activeDocument;
var pathLength = docRef.pathItems.length;
docRef.pathItems[0].note;
var hitList = []
for (i = 0; i<pathLength; i++)
if (docRef.pathItems[i].note= "John")
hitList.push(i)
alert(hitList.length)

So like this?
docRef = app.activeDocument;
var pathLength = docRef.pathItems.length;
docRef.pathItems[0].note;
var myCount = 0
for (i = 0; i<pathLength; i++)
if (docRef.pathItems[i].note== "JD")
myCount = myCount + 1
alert(myCount)

How to hide/disable menu items using Javascript in Acrobat 9 pro or later

We just wanted to know on how to hide/disable menu items for e.g. 'Open' menu item under 'File' menu in Acrobat 9 or later on Mac using Javascript. It would be useful if you could provide if any other option is in place already.

Not sure it will work, but you can try using the app.hideMenuItem() method. See reference here.

Javascript help - Hide/Show a page item

Environment:
APEX 3.1.00.09 running on AIX 5.3
Sample application on apex.oracle.com:
Workspace: GALWAY
UserID: gwicke
Password: gwicke
To see where my issues are:
1- Start on page 3
2- In the Agency drop down select 'J & B Marketing'
3- In the Contract drop down select the only contract that appears
4- Click on 'Edit Existing Contract'
5- Note the page item 'LY Closings' has the value 261
6- Click on the link (really a tab in my theme) at the top labeled 'Cost Detail'
7- The 'Estimate Justification' is the page item to be displayed/hidden as noted below.
8- The 'Homes Per Year' under the 'YEAR1' column is the user input page item
9- The P2_BUILDER_CLOSINGS (value 261 noted above) is the page item to be used in the comparison
I need to do a couple of things with a potentially hidden page item:
1- Every time the page loads I need to check to see if the page item (P8_ESTIMATE_JUSTIFICATION) is not null and if it is indeed not null, make it displayed.
2- When the user enters a value in another page item (P8_HOMES_PER_YEAR1), call a function to see if that value is more than 120% of another page item (P2_BUILDER_CLOSINGS) and if so make the above page item displayed (P8_ESTIMATE_JUSTIFICATION).
I have the javascript function created (showHideEstimateJustification) and in the HTML Header of the page. The function is being called currently with an onChange check on the page item entered by the user as noted above (P8_HOMES_PER_YEAR1).
Issues:
1- I need to force a SUBMIT after the user enters the value for P8_HOMES_PER_YEAR1 so it is available in session state and hence to the javascript function (other ideas welcome!)
2- I am currently using the x.style.display = 'inline' versus 'none' to hide/show the page item, where x is derived from var x = document.getElementById(P8_ESTIMATE_JUSTIFICATION) Is there a better way????
Any help is greatly appreciated.
-gary (a.k.a. Javascript newbie)

Hi,
Only your messages use the session state. The code would use the entered value, but you would need to change:
var homes = parseInt(document.getElementById('P8_HOMES_PER_YEAR1'));to
var homes = parseInt(document.getElementById('P8_HOMES_PER_YEAR1').value);so that "homes" becomes the numeric version of the value of the item
Normally, for the label, you would just enter an ID="xxx" into the HTML Table Cell Attributes for the label which you can then use in your javascript. For some reason this doesn't seem to want to work in this page.
What you could do is find all the labels and then check which is the right one before showing/hiding it. Something along the lines of:
var xx = document.getElementsByTagName("LABEL");
var zz;
var label;
for (zz = 0; zz < xx.length; zz++)
if (xx[zz].htmlFor == 'P8_ESTIMATE_JUSTIFICTION")
label = xx[zz];
xx[zz].style.display = 'none';
{code}
Andy

Disable all page items except one

Hi All,
Can any one please help me with the code. I have created a page with report from a table which has 5 values. If any user want to edit a row, he can do that by clicking the edit icon next to the row then the page redirected to another page with has a tabular form i created where there are 5 page items with values. I want to disable all the page items and enable only one item.the user can modify only one item which enabled, rest of the page items must be disabled. How can i do that. I have to use java script or is there any provision in apex itself?please help me....
Thanks In Advance
Meena
Edited by: 793914 on Oct 19, 2010 2:05 PM

Meena,
My apologies. 3.2 also allows you to set the Page Item to Display Only. I don't know why I was thinking that was new to 4.0!
By disabled, I assume you just want the current value to display, which would be null for a new record? It's not that you want to hide the disabled values, right?

Javascript reading a protected / hidden page item / application item

Hi
I'm trying to use javascript to validate / calculate the value of a page item.
For this I need to access an item that is it protected (not simply a text field which is editable) - or one which is currently hidden.
Is it possible for javascript to read the value of an application item or a page item that is hidden or a page item that is protected (not editable)?
Thanks in advance.
Mike

Mike, when you change the item type you are changing the html element type
from
<input type="text" id="P1_ONE" value="This is P1_ONE item type value" />
to something like
<td>This is P1_ONE item type value</td>
for the text type you would use .value so $('P1_ONE').value or document.getElementById('P1_ONE'). value but for the "display as text" would be $('P1_ONE').innerHTML or document.getElementById('P1_ONE').innerHTML.
been a while since i use APEX js systax as I've been using jquery but the second example of each type will work.

Javascript-disabled date picker items

If I disable a Date Picker item via Javascript the user can still enter a date into it via the calendar pop-up: I want to prevent this. Is there any easy way to do so? All I can think of currently is to build my own date picker functionality, with the icon as an item that I can hide or show via Javascript.

Hello,
Following Carl’s idea, the following should allow you to disable/enable a date picker item:
function toggleDatePicker (pThis, pDisable) {
var lNode = $x_UpTill(pThis,'TR');
lNode.disabled = pDisable;
var lNode = $x_UpTill(pThis,'TD');
var lA = lNode.getElementsByTagName('A');
if(pDisable){
    if(lA[0].getAttribute('href')){
       lA[0].setAttribute('onclickoff',lA[0].getAttribute('href'));
       lA[0].setAttribute('href','javascript: void(0);');
}else{
   if(lA[0].getAttribute('onclickoff')){
     lA[0].setAttribute('href',lA[0].getAttribute('onclickoff'));
}pThis is the date picker item name. pDisable set to true will disable the item, and false will enable it.
Although the user can enter a date into the field, it’s still disabled. That means that this item will not be POSTed to the server and will not be set in session state.
Hope it helps,
Arie.

How to Disable an Item of OAF Standard Page through Personalization.

Hi,
My requirement is to disable an item of Standard Page through personalization
so that users can't edit that field.
I tried checking for Disable under Personalization Properties but didn't find Disable Property.
Can any one give me an idea how to do that?
Thanks in advance.
Regards,
Subramanyam.

Hi,
Do as suggested by Abdul Wahid.
Please tell me which type of item is this like LOV, textbox...
Regards,
Reetesh Sharma

Want a javascript redirect URL using an already defined page item?

Hello,
i have a button where i configure a Redirect to URL option... and use : javascript:html_PopUp('http://yahoo.com', '_newwindow');
That is pretty clear, and it works. I also have a defined page item which does contain a valid URL
For example :P4_OFFICE_WEB_PAGE_LINK_V:='http://google.com'
I want the pop up to use a stored value, not the hardcoded one at the top... I have tried all of these, but none seem to work :
javascript:html_PopUp('P4_OFFICE_WEB_PAGE_LINK_V', '_newwindow');
javascript:html_PopUp(':P4_OFFICE_WEB_PAGE_LINK_V', '_newwindow');
javascript:html_PopUp(APEX_UTIL.GET_SESSION_STATE('P4_OFFICE_WEB_PAGE_LINK_V'), '_newwindow');
What should i use?
Thanks.

user12602240 wrote:
I am a bit novice... sometime i don't know when to use a : (colon) and when not! And i certainly didn't know an ampersand symbol, page item name followed by period (.) will return the value stored. All covered in the documentation.
Please update your forum profile with a real handle instead of "user12602240".

Example of setting page item using javascript

Does anyone have an example of setting the value of a page item (hidden) using javascript? I have seen the following in the Forum but I am having trouble implementing it. If someone could show an example of a region it is called from, and the javascript (and where it is placed), that would be great.
I have tried something similar to this without luck so far:
function setValue(){
$x('P1_FIELD').value = 'Oracle';
Thanks!
John

Hi VS,
you should really use a "Set Value" dynamic action for that, that's much more transparent than using the onclick definition in the button attributes.
Regards
Patrick
Member of the APEX development team
My Blog: http://www.inside-oracle-apex.com
APEX Plug-Ins: http://apex.oracle.com/plugins
Twitter: http://www.twitter.com/patrickwolf

After installing Firefox6 many sites will not finish loading. I click on "stop loading this page" and then click on "reload this page" and the page loads. Also if I disable javascript the page will load.

After installing Firefox 6 MANY web site will not finish loading. I disabled all add-ons and still have the problem. If I disable javascript, the pages will load. When the page is trying to load, if I hit "stop loading this page" and then hit "reload this page", the page will load; but sometimes I have to do this 2-3 times for the page to finish loading. No problem with these pages using IE8.

I see that you ave changed some network.http prefs.<br />
Doing that can cause all kinds of problems because not all servers like such changes, so you can try to reset those prefs on the about:config page.<br />
network.http.max-connections 48<br />
network.http.max-connections-per-server 16<br />
network.http.max-persistent-connections-per-proxy 16<br />
network.http.max-persistent-connections-per-server 8<br />
network.http.pipelining true<br />
network.http.pipelining.firstrequest true<br />
network.http.pipelining.maxrequests 8<br />
network.http.proxy.pipelining true<br />
network.http.request.max-start-delay 0<br />
Start Firefox in [[Safe Mode]] to check if one of your add-ons is causing your problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).
See [[Troubleshooting extensions and themes]] and [[Troubleshooting plugins]]

Javascript in page segment(urgent)?

Hi,
I want to customize out-of-box Profile pages on WC Spaces. I added a selection box on a page segment(jsff), and I want to do 2 things.
1.     When a user picks an item from the selection box, it should call the parseAddress() javascript function. But, I got js errors from IE but no errors from FF. ‘parseAddress’ is undefined. URL…./MyProfileMainView.jspx
2.     Inside the js function, how can it write to <af:inputText> items?
<?xml version = '1.0' encoding = 'UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<af:panelFormLayout labelWidth="150" id="olipfl1">
<af:panelLabelAndMessage label="#{uib_o_w_pc_p_ProfileMessages.LABEL_BUSINESS_FAX}" labelStyle="font-weight:bold;" id="oliplam1">
<af:inputText value="#{bindings.businessFax.inputValue}" simple="true" columns="40" maximumLength="50" disabled="#{!AdminConfig.ootbFields['fax'].allowEdit}" shortDesc="#{requestContext.formatter[uib_o_w_pc_p_ProfileMessages.ENTER_FIELD][uib_o_w_pc_p_ProfileMessages.LABEL_BUSINESS_FAX]}" id="oliit1"/>
</af:panelLabelAndMessage>
<f:facet name="metaContainer">
<af:resource type="javascript" source=”function parseAddress(event) {            alert("new value: " + event.getNewValue());           } "/>
</f:facet>
<af:panelLabelAndMessage xmlns:af="http://xmlns.oracle.com/adf/faces/rich" label="*Location" id="splam1" labelStyle="font-weight:bold;">
<af:selectOneChoice xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="ssoc1" simple="true" valuePassThru="true">
<af:clientListener xmlns:af="http://xmlns.oracle.com/adf/faces/rich" method="*parseAddress*" type="valueChange"/>
<f:selectItems xmlns:f="http://java.sun.com/jsf/core" value="#{employeeBean.locationsList}" id="ssi1"/>
</af:selectOneChoice>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{uib_o_w_pc_p_ProfileMessages.LABEL_BUSINESS_STREET}" labelStyle="font-weight:bold;" id="oliplam4">
<af:inputText value="#{bindings.businessStreet.inputValue}" simple="true" columns="40" maximumLength="50" disabled="#{!AdminConfig.ootbFields['street'].allowEdit}" shortDesc="#{requestContext.formatter[uib_o_w_pc_p_ProfileMessages.ENTER_FIELD][uib_o_w_pc_p_ProfileMessages.LABEL_BUSINESS_STREET]}" id="oliit4"/>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</jsp:root>
I’m trying to follow this discussions - https://forums.oracle.com/forums/thread.jspa?threadID=978631, but I am kind of confused. I’m using jDeveloper 11.1.1.5
Thank you.
Edited by: 891549 on Feb 27, 2012 12:11 PM

Hi,
not sure why it flags an error on IE - this is what I can't say from remote. However, this code here
<f:facet name="metaContainer">
<af:resource type="javascript" source=”function *parseAddress*(event) { alert("new value: " + event.getNewValue()); } "/>
</f:facet>
{code}
should be
{code}
<af:resource type="javascript">
      function parseAddress(event) { alert("new value: " + event.getNewValue()); }
</af:resource>
{code}
To access the input text field (as it is not in a different naming container) you
1. set the input text clientComponent property to "true"
2. call event.getSource().findComponent("oliit4");
Frank

Customize look of javascript disabled page items

Similar Messages

Maybe you are looking for