You need to sign in to do that
Don't have an account?
Use of java script with output panel
Hello,
I just want to show and hide the output panel on changes the value of dropdown box
<apex:page showHeader="false" standardController="travel_booking__c" extensions="travel">
<html><br></br><br></br>
<head> <b><big><center> <font face="Times New Roman" size="+3" color="#ff0000">Capgemini Travel Desk</font></center></big></b></head>
<br></br><br></br>
<apex:form id="f1" rendered="true">
<apex:pageBlock >
<apex:pageBlockSection title="Login" >
<apex:outputtext value="Corp ID"/>
<apex:outputtext value="Name"/>
<apex:outputtext value="Project Name"/>
<apex:outputtext value="Manager"/>
<apex:inputField id="piclist" value="{!travel_booking__c.Travel_type__c}" onchange="changevalue(document.getElementById('{!$Component.piclist}'));" />
<br></br>
<apex:outputText value="*This site is powered by Megha Travel agency"/>
<br></br>
<apex:outputPanel id="flight" rendered="false">
<apex:outputText value="From Country" />
<apex:inputField value="{!travel_booking__c.Fromcountry__c}"/>
<apex:outputText value="To Country" />
<apex:inputField value="{!travel_booking__c.To_Country__c}"/>
</apex:outputPanel>
<apex:outputPanel layout="block" id="train" rendered="false">
<apex:outputText value="From City" />
<apex:inputField value="{!travel_booking__c.From_City__c}"/>
<apex:outputText value="To City" />
<apex:inputField value="{!travel_booking__c.To_City__c}"/>
</apex:outputPanel>
</apex:pageBlockSection>
<script type="text/javascript">
function changevalue(txt)
{
if(txt.value=="Flight (International)")
//alert(document.getElementById("flight"));
alert(txt.value);
if(txt.value == 'Flight')
{
document.getElementById('{!$Component.flight}').style.visibility = 'visible';
}
}
</script>
</apex:pageBlock>
</apex:form>
</html>
</apex:page>
but this is not working .Moreover plz tell me how to do the same with the help of action function .
Thanks
Hi pupilstuff,
It seems there is some issue in referencing the id of the concerned component.
To refer to a Visualforce component in JavaScript or another Web-enabled language you must specify a value for the id
attribute for that component.
A DOM id is constructed from a combination of the id attribute of the component, and the id attributes of all components that contain the element.This ensures every element has a unique DOM id. Please ensure you are also referncing the nesting of prent components while giving the DOM id.
Refer to the code below for clarity (code highlighted in red) :-
<apex:page controller="MyJSController">
<script type="text/javascript">
function getRemoteAccount()
{
var accountName = document.getElementById('acctSearch').value;
MyJSController.getAccount(accountName, function(result, event)
{
if (event.status)
{
// Get DOM IDs for HTML and Visualforce elements like this document.getElementById('remoteAcctId').innerHTML = result.Id document.getElementById({!$Component.block.blockSection.secondItem.acctNumEmployees}" ).innerHTML = result.NumberOfEmployees;
}
else if
(event.type === 'exception')
{
document.getElementById("responseErrors").innerHTML = event.message; } else
{ document.getElementById("responseErrors").innerHTML = event.message;
}
}, {escape:true});
}
</script>
<input id="acctSearch" type="text"/>
<button onclick="getRemoteAccount()">Get Account</button>
<div id="responseErrors"></div>
<apex:pageBlock id="block">
<apex:pageBlockSection id="blockSection" columns="2">
<apex:pageBlockSectionItem id="firstItem">
<span id="remoteAcctId"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="secondItem">
<apex:outputText id="acctNumEmployees"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
Hello Ispita,
Thanks for reply.If I am getting you correct than I should use
document.getElementById('{!$Component.block.pageblock.flight}').style.visibility ='visible';
for show or hide the ouput panel where
block= PageBlock id
pageblock=PageBlockSection id
flight=outputpanel id
But I am not getting the required result