You need to sign in to do that
Don't have an account?
Mike Schumacher 2
Javascript window.onload cannot get $component Id from visualforce page
I created a VF page with javascript to set a date field as disabled when a checkbox is unchecked. I then wanted to function to also execute onload so the date field would be disabled if the checkbox was unchecked or enabled when the checkbox was checked.
I noticed in the window.onload event accessing $component.xxx returned null. If I move a field outside the apex:form tags, I can get the $component.xxx ID as expected.
I am able to pass the VF $component.id to the javascript routine but how do I get the form field ID during the onload event? I must be missing something basic at this point. Any assistance is appreciated.
*** Here is the VF code. ***
<apex:page standardController="OpportunityLineItem" showHeader="true" sidebar="true">
<apex:form id="myForm" >
<script type="text/javascript">
function ToggleInput(theId,overrideId)
{
var e = document.getElementById(theId);
var a = document.getElementById(overrideId).checked;
if(e != null)
{
if(a === true)
{
e.disabled = false;
} else
{
//e.disabled = (e.disabled ? false : "disabled");
e.disabled = true;
}
}
}
//window.onload = function () {document.getElementById('{!$Component.liItemShipDate}').disabled= "disabled"; }
window.onload = function()
{
alert(document.getElementById('{!$Component.liItemShipDate}'));
}
</script>
<apex:sectionHeader id="pgSection" title="Opportunity Product Edit" subtitle="{!OpportunityLineItem.Name}" />
<apex:pageBlock id="pgBlock" mode="edit" title="Opportunity Product Edit">
<apex:pageBlockButtons location="both">
<apex:commandButton value="Save" action="{!Save}"/>
<apex:commandButton value="Cancel" action="{!Cancel}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection id="pgBlockSectionAcctInfo" title="" collapsible="false" columns="2" >
<apex:pageBlockSectionItem >
<apex:outputLabel >Opportunity</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.OpportunityId}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Machine #</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Machine__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Product</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.Product2Id}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Quantity</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Quantity}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Product Family</apex:outputLabel>
<apex:inputField id="actOwner" value="{!OpportunityLineItem.Product_Family__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Sales Price</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.UnitPrice}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Product Type</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.Product_TypeTEXT__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Discount Percentage</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Discount}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >List Price</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.ListPrice}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Total Price</apex:outputLabel>
<apex:outputField id="actRating" value="{!OpportunityLineItem.TotalPrice}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Serial Number</apex:outputLabel>
<apex:inputField id="actOwner" value="{!OpportunityLineItem.Serial_Number__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Asset</apex:outputLabel>
<apex:inputField id="actOwner" value="{!OpportunityLineItem.Asset__c}" />
</apex:pageBlockSectionItem>
<!--
<apex:inputCheckbox onclick="ToggleInput('{!$Component.textInput}');" value="{!OpportunityLineItem.Override_Opp_Ship_Date__c}"/>
<apex:inputField id="textInput" value="{!OpportunityLineItem.Ship_Date__c}"/>
-->
<apex:inputCheckbox id="liItemOverride" onclick="ToggleInput('{!$Component.liItemShipDate}','{!$Component.liItemOverride}');" value="{!OpportunityLineItem.Override_Opp_Ship_Date__c}" />
<apex:inputField id="liItemShipDate" value="{!OpportunityLineItem.Ship_Date__c}" />
</apex:pageBlockSection>
<apex:pageBlockSection id="pgBlockSectionAdditionalInformation" title="Description" collapsible="false" columns="2">
<!--ANY CUSTOM FIELDS / ADDITIONAL INFORMATION CAN GO HERE-->
<apex:pageBlockSectionItem >
<apex:outputLabel >Line Description</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Description}" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
I noticed in the window.onload event accessing $component.xxx returned null. If I move a field outside the apex:form tags, I can get the $component.xxx ID as expected.
I am able to pass the VF $component.id to the javascript routine but how do I get the form field ID during the onload event? I must be missing something basic at this point. Any assistance is appreciated.
*** Here is the VF code. ***
<apex:page standardController="OpportunityLineItem" showHeader="true" sidebar="true">
<apex:form id="myForm" >
<script type="text/javascript">
function ToggleInput(theId,overrideId)
{
var e = document.getElementById(theId);
var a = document.getElementById(overrideId).checked;
if(e != null)
{
if(a === true)
{
e.disabled = false;
} else
{
//e.disabled = (e.disabled ? false : "disabled");
e.disabled = true;
}
}
}
//window.onload = function () {document.getElementById('{!$Component.liItemShipDate}').disabled= "disabled"; }
window.onload = function()
{
alert(document.getElementById('{!$Component.liItemShipDate}'));
}
</script>
<apex:sectionHeader id="pgSection" title="Opportunity Product Edit" subtitle="{!OpportunityLineItem.Name}" />
<apex:pageBlock id="pgBlock" mode="edit" title="Opportunity Product Edit">
<apex:pageBlockButtons location="both">
<apex:commandButton value="Save" action="{!Save}"/>
<apex:commandButton value="Cancel" action="{!Cancel}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection id="pgBlockSectionAcctInfo" title="" collapsible="false" columns="2" >
<apex:pageBlockSectionItem >
<apex:outputLabel >Opportunity</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.OpportunityId}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Machine #</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Machine__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Product</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.Product2Id}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Quantity</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Quantity}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Product Family</apex:outputLabel>
<apex:inputField id="actOwner" value="{!OpportunityLineItem.Product_Family__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Sales Price</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.UnitPrice}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Product Type</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.Product_TypeTEXT__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Discount Percentage</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Discount}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >List Price</apex:outputLabel>
<apex:outputField id="actOwner" value="{!OpportunityLineItem.ListPrice}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Total Price</apex:outputLabel>
<apex:outputField id="actRating" value="{!OpportunityLineItem.TotalPrice}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Serial Number</apex:outputLabel>
<apex:inputField id="actOwner" value="{!OpportunityLineItem.Serial_Number__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Asset</apex:outputLabel>
<apex:inputField id="actOwner" value="{!OpportunityLineItem.Asset__c}" />
</apex:pageBlockSectionItem>
<!--
<apex:inputCheckbox onclick="ToggleInput('{!$Component.textInput}');" value="{!OpportunityLineItem.Override_Opp_Ship_Date__c}"/>
<apex:inputField id="textInput" value="{!OpportunityLineItem.Ship_Date__c}"/>
-->
<apex:inputCheckbox id="liItemOverride" onclick="ToggleInput('{!$Component.liItemShipDate}','{!$Component.liItemOverride}');" value="{!OpportunityLineItem.Override_Opp_Ship_Date__c}" />
<apex:inputField id="liItemShipDate" value="{!OpportunityLineItem.Ship_Date__c}" />
</apex:pageBlockSection>
<apex:pageBlockSection id="pgBlockSectionAdditionalInformation" title="Description" collapsible="false" columns="2">
<!--ANY CUSTOM FIELDS / ADDITIONAL INFORMATION CAN GO HERE-->
<apex:pageBlockSectionItem >
<apex:outputLabel >Line Description</apex:outputLabel>
<apex:inputField id="actRating" value="{!OpportunityLineItem.Description}" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Try this and let me know.
document.getElementById('{!$Component.myForm.pgBlock.pgBlockSectionAcctInfo.liItemShipDate}')
Best Regards,
-Vivek
All Answers
Try below code and let me know if it works.
document.getElementById('{!$Component.myForm.iItemShipDate}'))
Best Regards,
-Vivek
Try this and let me know.
document.getElementById('{!$Component.myForm.pgBlock.pgBlockSectionAcctInfo.liItemShipDate}')
Best Regards,
-Vivek
-Mike