+ Start a Discussion

Use of java script with output panel



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">
<head> <b><big><center> <font face="Times New Roman" size="+3" color="#ff0000">Capgemini Travel Desk</font></center></big></b></head>
<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}'));" />
  <apex:outputText value="*This site is powered by Megha Travel agency"/>
  <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 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}"/>

  <script type="text/javascript">
        function changevalue(txt)
             if(txt.value=="Flight     (International)")
             if(txt.value == 'Flight')
                 document.getElementById('{!$Component.flight}').style.visibility = 'visible'; 




but this is not working .Moreover plz tell me how to do the same with the help of action  function .



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});   


    <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 id="secondItem">   

                                       <apex:outputText id="acctNumEmployees"/> 








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