Apex Code Development You need to sign in to do that
Don't have an account?
Robert Davis 16 Visualforce Page - Populate fields based on Value from another Field - JavaScript inside VF Page
Hello, I am hoping some will be able to help. I have a visualforce page that I use to select products from the pricebook. What I would like to do is when a field named Seats__c is updated on the page that it also updates the field value of a field named X2018_Q1_Seats__c. I would like to have it so that if the user would like to over write it they can but it would default to the value in Seats__c by default.
Below is what I have tried, unsuccessfully:
This is the javascript function that I am trying to use (it is above but thought it would be easier to see) here:
Thank you in advance,
Robert
Below is what I have tried, unsuccessfully:
<apex:page standardController="Opportunity" extensions="opportunityProductEntryExtension" action="{!priceBookCheck}" >
<apex:sectionHeader Title="Manage {!$ObjectType.Product2.LabelPlural}" subtitle="{!opportunity.Name}"/>
<apex:messages style="color:red"/>
<style>
.search{
font-size:14pt;
margin-right: 20px;
}
.fyi{
color:red;
font-style:italic;
}
.label{
margin-right:10px;
font-weight:bold;
}
</style>
<script type='text/javascript'>
// This script assists the search bar functionality
// It will execute a search only after the user has stopped typing for more than 1 second
// To raise the time between when the user stops typing and the search, edit the following variable:
var waitTime = 1;
var countDown = waitTime+1;
var started = false;
function resetTimer(){
countDown=waitTime+1;
if(started==false){
started=true;
runCountDown();
}
}
function runCountDown(){
countDown--;
if(countDown<=0){
fetchResults();
started=false;
}
else{
window.setTimeout(runCountDown,1000);
}
}
function updateSeats() {
var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}");
document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats;
}
</script>
<apex:form id="pageform" >
<apex:outputPanel id="mainBody">
<apex:outputLabel styleClass="label">PriceBook: </apex:outputLabel>
<apex:outputText value="{!theBook.Name}"/>
<apex:commandLink action="{!changePricebook}" value="change" immediate="true"/>
<br/>
<!-- not everyone is using multi-currency, so this section may or may not show -->
<apex:outputPanel rendered="{!multipleCurrencies}">
<apex:outputLabel styleClass="label">Currency: </apex:outputLabel>
<apex:outputText value="{!chosenCurrency}"/>
<br/>
</apex:outputPanel>
<br/>
<!-- this is the upper table... a.k.a. the "Shopping Cart"-->
<!-- notice we use a lot of $ObjectType merge fields... I did that because if you have changed the labels of fields or objects it will reflect your own lingo -->
<apex:pageBlock title="Selected {!$ObjectType.Product2.LabelPlural}" id="selected">
<apex:pageblockTable value="{!shoppingCart}" var="s" id="pageblocktable">
<apex:column >
<apex:commandLink value="Remove" action="{!removeFromShoppingCart}" reRender="selected,searchResults" immediate="true">
<!-- this param is how we send an argument to the controller, so it knows which row we clicked 'remove' on -->
<apex:param value="{!s.PriceBookEntryId}" assignTo="{!toUnselect}" name="toUnselect"/>
</apex:commandLink>
</apex:column>
<apex:column headerValue=" " title="{!$ObjectType.Product2.fields.Name.inlineHelpText}">
<apex:pageBlockSection >
<apex:inputField value="{!s.Program_Start_Date__c}" label="Program Start Date :"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
</apex:pageBlockSection>
<apex:outputField value="{!s.PriceBookEntry.Product2.Name}"/><br/>
<i>Line Item Description : </i>
<apex:inputField value="{!s.Description}" /><br/>
</apex:column>
<apex:column headerValue="">
<br/><br/>
# of <apex:outputField value="{!s.PricebookEntry.Product2.Unit_of_Measure_Plural__c}" style="width:180px"/><br/>
<apex:outputText value="Svc Channel" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/><br/><br/>
<apex:outputText value="Qtrly Seat Ramp :" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/>
</apex:column>
<apex:column headerValue=" "
title="{!$ObjectType.OpportunityLineItem.fields.Quantity.inlineHelpText}" id="yearOneColumn">
<br/>
<apex:inputField value="{!s.Quantity}" style="width:50px" />
<apex:inputField value="{!s.Service_Channel__c}"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:pageBlockSection id="pageBlockSectionYearOne">
<apex:inputField value="{!s.X2018_Q1_Seats__c}" style="width:30px" id="result"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:inputField value="{!s.X2018_Q2_Seats__c}" style="width:30px"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:inputField value="{!s.X2018_Q3_Seats__c}" style="width:30px"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:inputField value="{!s.X2018_Q4_Seats__c}" style="width:30px"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
</apex:pageBlockSection>
</apex:column>
<apex:outputText value="2018 Q3" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText>
<apex:column headerValue=" "
title="{!$ObjectType.OpportunityLineItem.fields.Number_of_Months__c.inlineHelpText}">
<center>
<b>Contract Length (Months)</b>
<apex:inputField value="{!s.Number_of_Months__c}" style="width:50px"/>
</center>
</apex:column>
<apex:column headerValue="">
price per <apex:outputField value="{!s.PricebookEntry.Product2.Unit_of_Measure_Singular__c}" style="width:160px"/><br/>
<apex:outputText value="Service Type" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/><br/><br/>
<apex:outputText value="Qtrly Seat Ramp :" rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"></apex:outputText><br/><br/><br/>
</apex:column>
<apex:column headerValue=" "
title="{!$ObjectType.OpportunityLineItem.fields.UnitPrice.inlineHelpText}">
<apex:inputField value="{!s.Unit_Price2__c}" style="width:70px" required="true" />
<apex:inputField value="{!s.Service_Type__c}"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:pageBlockSection >
<apex:inputField value="{!s.X2019_Q1_Seats__c}" style="width:30px"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:inputField value="{!s.X2019_Q2_Seats__c}" style="width:30px"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:inputField value="{!s.X2019_Q3_Seats__c}" style="width:30px"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<apex:inputField value="{!s.X2019_Q4_Seats__c}" style="width:30px"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
</apex:pageBlockSection>
</apex:column>
<apex:column headerValue=" " title="Enter Your Specific Margin - Pre-Populated with Avg">
<center>
<b>Adj GM%</b>
<apex:inputField value="{!s.Adjusted_Gross_Margin_Percentage__c}" style="width:30px" />
</center>
</apex:column>
<apex:column headerValue=" "
title="{!$ObjectType.OpportunityLineItem.fields.One_Time_Revenue__c.inlineHelpText}">
<center>
<b>One-Time Rev</b>
<apex:inputCheckbox value="{!s.One_Time_Revenue__c}" />
</center>
</apex:column>
<apex:column headerValue=" " title=" ">
<apex:outputLabel rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}" style="width:50px">Total # of Seats </apex:outputLabel>
<br/><br/><br/><br/><br/><br/>
</apex:column>
<apex:column headerValue=" " title="{!$ObjectType.OpportunityLineItem.fields.Seats__c.inlineHelpText}" id="seatColumn">
<apex:inputField value="{!s.Seats__c}" style="width:50px" onkeyup="refreshTotals();" id="Seats" onclick="updateSeats()"
rendered="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"
required="{!IF(s.PriceBookEntry.Product2.Project_Seat_Count__c == 'TRUE', true, false)}"/>
<br/><br/><br/><br/><br/><br/>
</apex:column>
</apex:pageblockTable>
<apex:pageBlockButtons >
<apex:commandButton action="{!onSave}" value="Save"/>
<apex:commandButton action="{!onCancel}" value="Cancel" immediate="true"/>
</apex:pageBlockButtons>
</apex:pageBlock>
<apex:pageBlock >
<apex:outputPanel styleClass="search">
Search for {!$ObjectType.Product2.LabelPlural}:
</apex:outputPanel>
<apex:actionRegion renderRegionOnly="false" immediate="true">
<apex:actionFunction name="fetchResults" action="{!updateAvailableList}" reRender="searchResults" status="searchStatus"/>
<apex:selectList value="{!selectedProdFamily}" label="Select Product Family : " multiselect="false" size="1">
<apex:actionSupport event="onchange" action="{!updateAvailableList}" />
<apex:selectOptions value="{!ProductFamily}" />
</apex:selectList>
<apex:inputText value="{!searchString}" onkeydown="if(event.keyCode==13){this.blur();}else{resetTimer();}" style="width:300px"/>
<apex:actionStatus id="searchStatus" startText="searching..." stopText=" "/>
</i>
</apex:actionRegion>
<br/>
<br/>
<apex:outputPanel id="searchResults">
<apex:pageBlockTable value="{!AvailableProducts}" var="a">
<apex:column headerValue="{!$ObjectType.Product2.Fields.Family.Label} / Company" value="{!a.Product2.Family}"/>
<apex:column headerValue="{!$ObjectType.Product2.Fields.Name.Label}" value="{!a.Product2.Name}" />
<apex:column headerValue="{!$ObjectType.Product2.Fields.Product_Gross_Margin__c.Label}" value="{!a.Product2.Product_Gross_Margin__c}"/>
<apex:column >
<!-- command button in a column... neato -->
<apex:commandButton value="Select" action="{!addToShoppingCart}" reRender="selected,searchResults" immediate="true">
<!-- again we use apex:param to be able to tell the controller which row we are working with -->
<apex:param value="{!a.Id}" assignTo="{!toSelect}" name="toSelect"/>
</apex:commandButton>
</apex:column>
</apex:pageBlockTable>
<!-- We put up a warning if results exceed 100 rows -->
<apex:outputPanel styleClass="fyi" rendered="{!overLimit}">
<br/>
Your search returned over 100 results, use a more specific search string if you do not see the desired {!$ObjectType.Product2.Label}.
<br/>
</apex:outputPanel>
</apex:outputPanel>
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
</apex:page>
This is the javascript function that I am trying to use (it is above but thought it would be easier to see) here:
<script>
function updateSeats() {
var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}");
document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats;
}
</script>
Thank you in advance,
Robert
If all the Ids in the paths after !$Component are correct, it lacks just ".value" for totalSeats
and you could use onkeyup instead of onclick for simultaneous updates.
<apex:inputField value="{!s.Seats__c}" style="width:50px" onkeyup="refreshTotals();updateSeats() " id="Seats"
<script> function updateSeats() { var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}").value; document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats; } </script>Alain
Thanks for the help. I am still working to get it to work but I appreciate the help.
Robert
I have made a simpler test and if your paths seem correct (I have just checked them quickly now).
1) Did you see these alert popups?
<script> function updateSeats() { alert('1-updateSeats'); var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}").value; alert('2-totalSeats:'+ totalSeats); document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats; } </script>2) In fact, if there is just a little bug (uppcase instead of lowercase) in the javascript code, nothing works (silently).
With Chrome, you should open the DevTools panel. Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
https://developers.google.com/web/tools/chrome-devtools/
The Dev Tools is absolutely mandatory especially with javascript as soon as that doesn't work.
Thanks. Still trying to figure it all out. I never get to the second alert. I will definitely give the URL a look.
Robert
Thank you for your patience. I am new to JavaScript. I did as you suggested, but nothing happened. When I looked at the Chrome Developer tool I get the following:
I am not sure what this tells me.
Robert
And "updateSeats" is not defined => click on the link "opportunityProductEn.......AA3:137"
What do you see?
The certificate used to load https://sitel--full--c.cs79.visual.force.com/apex/opportunityProductEntry?id=0061h0000027e2UAAQ uses an SSL certificate that will be distrusted in an upcoming release of Chrome. Once distrusted, users will be prevented from loading this resource. See https://g.co/chrome/symantecpkicerts for more information.
Robert
<script>
function updateSeats() {
alert('1-updateSeats');
alert("2-[{!$Component.pageform}]");
alert("3-[{!$Component.pageform.mainBody}]");
alert("4-[{!$Component.pageform.mainBody.selected}]");
alert("5-[{!$Component.pageform.mainBody.selected.pageblocktable}]");
alert("6-[{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn}]");
alert("7-[{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}]");
var totalSeats = document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.seatColumn.Seats}").value;
alert('2-totalSeats:'+ totalSeats);
document.getElementById("{!$Component.pageform.mainBody.selected.pageblocktable.yearOneColumn.pageBlockSectionYearOne.result}").value = totalSeats; }
</script>
Chrome: Control+Shift+C (inspector)