+ Start a Discussion
pupilstuffpupilstuff 

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

Ispita_NavatarIspita_Navatar

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.

 

pupilstuffpupilstuff

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