function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
dave23dave23 

Javascript and Visualforce field Ids

I have some javascript code that runs to popup a window with account details as follows. The code needs to get the selected index which is the ID of the account to display.
 
I have not been able to find a way to reference the selectedIndex other than hardcoding the Id generated by Salesforce. Obviously this is not a good method as the field Id will probably change at some point. I'm not a JS expert but I would think there is a better way to do this? Can anyone help?
Code:
  <script type="text/javascript">
  function viewAccount() {
        var acc_select = document.getElementById('j_id0:convertData:j_id4:j_id8:accountName');
         var acc_id = acc_select.options[acc_select.selectedIndex].value;
         if (acc_id == null || acc_id == "" || acc_id == 000000000000000) {
            alert("You can only view existing accounts.");
         } else {
            var AccountWindow = window.open('/' + acc_id + '/p','Account','height=300,width=500,status=yes,scrollbars=yes,resizable=yes');
            AccountWindow.focus();
         }
     }
  </script>
VF code: 
          <apex:panelGroup > 
                  <apex:selectList id="accountName" required="true" size="1" value="{!selectedAccountID}">  
                      <apex:selectOptions value="{!leadAccountNames}"/> 
                  </apex:selectList> 
                  <apex:outputLabel value="View" title="View (New Window)" onclick="viewAccount()" id="theLink"></apex:outputLabel> 
              </apex:panelGroup>
 
 
Thanks
 
Dave
Best Answer chosen by Admin (Salesforce Developers) 
Ron HessRon Hess
In the visualforce page you can name page elements with the $Component feature, this resolves to the ID of the html element that you name.

See docs on how to use $Component, there is an example in this article where i use $Component to get the ID of a field generated by a third party JS library.
http://blog.sforce.com/sforce/2008/12/forcecom-sites-and-captcha.html
and
http://wiki.apexdevnet.com/index.php/Sites_And_Captcha

here is what I did:
Code:
 <apex:inputhidden value="{!challenge}" id="challenge" />
        <apex:inputhidden value="{!response}" id="response" />
 <script type="text/javascript">
      function captureResponse(ele) { 
  document.getElementById('{!$Component.challenge}').value = 
  document.getElementById('recaptcha_challenge_field').value;
  document.getElementById('{!$Component.response}').value = 
  document.getElementById('recaptcha_response_field').value;
  }
 </script>

 
you would do something like this (not tested):
Code:
 <apex:panelGroup > 
   <apex:selectList id="accountName" required="true" size="1" value="{!selectedAccountID}">  
         <apex:selectOptions value="{!leadAccountNames}"/> 
   </apex:selectList> 
   <apex:outputLabel value="View" title="View (New Window)" 
            onclick="viewAccount('{!$Component.accountName'}')" id="theLink"></apex:outputLabel> 
</apex:panelGroup>

 
 
then modify your JS function to take a string passed in for the element name

All Answers

Ron HessRon Hess
In the visualforce page you can name page elements with the $Component feature, this resolves to the ID of the html element that you name.

See docs on how to use $Component, there is an example in this article where i use $Component to get the ID of a field generated by a third party JS library.
http://blog.sforce.com/sforce/2008/12/forcecom-sites-and-captcha.html
and
http://wiki.apexdevnet.com/index.php/Sites_And_Captcha

here is what I did:
Code:
 <apex:inputhidden value="{!challenge}" id="challenge" />
        <apex:inputhidden value="{!response}" id="response" />
 <script type="text/javascript">
      function captureResponse(ele) { 
  document.getElementById('{!$Component.challenge}').value = 
  document.getElementById('recaptcha_challenge_field').value;
  document.getElementById('{!$Component.response}').value = 
  document.getElementById('recaptcha_response_field').value;
  }
 </script>

 
you would do something like this (not tested):
Code:
 <apex:panelGroup > 
   <apex:selectList id="accountName" required="true" size="1" value="{!selectedAccountID}">  
         <apex:selectOptions value="{!leadAccountNames}"/> 
   </apex:selectList> 
   <apex:outputLabel value="View" title="View (New Window)" 
            onclick="viewAccount('{!$Component.accountName'}')" id="theLink"></apex:outputLabel> 
</apex:panelGroup>

 
 
then modify your JS function to take a string passed in for the element name

This was selected as the best answer
dave23dave23

Thanks Ron. That did the job.

Dave