Finding salesforce and/or html tag ids

on
Nowadays we are using more js in visualforce to traverse in the DOM to get most of the job done at the same time face many issues with finding ids of tag using javascript. I thought to put this concept and demo with this blog.
Folks, as we know visualforce page will render a html component which will have as shown below:
VF Code:
<apex:form id="mainForm">
        <apex:pageblock id="pageBlock">
            <apex:pageblockSection id="pageBlockSection">
                <apex:inputText id="inputText"/>                
                <apex:commandLink onclick="return GetValue();" value="inputText" rerender="mainForm"/>
                
                <apex:inputText styleClass="inputTextClass"/>
                <apex:commandLink onclick="return GetValueInputTextClass();" value="inputTextClass" rerender="mainForm"/>
            </apex:pageblockSection>
        </apex:pageblock>
    </apex:form>
Rendered HTML:
<form id="j_id0:mainForm" name="j_id0:mainForm" method="post" action="https://c.ap2.visual.force.com/apex/SalesforceIds_SimpleJS?core.apexpages.request.devconsole=1" enctype="application/x-www-form-urlencoded">
  <input type="hidden" name="j_id0:mainForm" value="j_id0:mainForm">
  <div class="apexp">
    <div id="j_id0:mainForm:pageBlock" class="bPageBlock brandSecondaryBrd apexDefaultPageBlock secondaryPalette">
      <div class="pbBody">
        <div id="j_id0:mainForm:pageBlock:pageBlockSection">
          <div class="pbSubsection">
            <table class="detailList" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td class="dataCol  first " colspan="2">
                    <input id="j_id0:mainForm:pageBlock:pageBlockSection:inputText" type="text" name="j_id0:mainForm:pageBlock:pageBlockSection:inputText">
                  </td>
                  <td class="dataCol  first " colspan="2">
                    <a href="#" id="j_id0:mainForm:pageBlock:pageBlockSection:j_id2" name="j_id0:mainForm:pageBlock:pageBlockSection:j_id2" onclick="return GetValue();if(window != window.top){var f = document.getElementById('j_id0:mainForm');f.action += (f.action.indexOf('?') == -1 ? '?' : '&amp;');};A4J.AJAX.Submit('j_id0:mainForm',event,{'similarityGroupingId':'j_id0:mainForm:pageBlock:pageBlockSection:j_id2','parameters':{'j_id0:mainForm:pageBlock:pageBlockSection:j_id2':'j_id0:mainForm:pageBlock:pageBlockSection:j_id2'} } );return false;">
                      inputText
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="dataCol  last " colspan="2">
                    <input type="text" name="j_id0:mainForm:pageBlock:pageBlockSection:j_id3" class="inputTextClass">
                  </td>
                  <td class="dataCol  last " colspan="2">
                    <a href="#" id="j_id0:mainForm:pageBlock:pageBlockSection:j_id4" name="j_id0:mainForm:pageBlock:pageBlockSection:j_id4" onclick="return GetValueInputTextClass();if(window != window.top){var f = document.getElementById('j_id0:mainForm');f.action += (f.action.indexOf('?') == -1 ? '?' : '&amp;');};A4J.AJAX.Submit('j_id0:mainForm',event,{'similarityGroupingId':'j_id0:mainForm:pageBlock:pageBlockSection:j_id4','parameters':{'j_id0:mainForm:pageBlock:pageBlockSection:j_id4':'j_id0:mainForm:pageBlock:pageBlockSection:j_id4'} } );return false;">
                      inputTextClass
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="pbFooter secondaryPalette">
        <div class="bg">
        </div>
      </div>
    </div>
  </div>
  <div id="j_id0:mainForm:j_id5">
  </div>
</form>
There are other methods to access the ids of salesforce tags which we discuss with this blog.
Method 1:
Using Component:
DEMO:
                                                                      Click Here SalesforceFindIds_Component
VF Code and JS:
<apex:page >  
 <head>
  <script language="javascript">
   function GetValue(){
    var val = document.getElementById('{!$Component.mainForm.pageBlock.pageBlockSection.inputText}');
    alert(val.value);   
   }
  </script>
 </head> 
 
 <apex:form id="mainForm">
        <apex:pageblock id="pageBlock">
            <apex:pageblockSection id="pageBlockSection">
                <apex:inputText id="inputText"/>
                <apex:commandLink onclick="return GetValue();" value="Find"/>
            </apex:pageblockSection>
        </apex:pageblock>
    </apex:form>
    
</apex:page>
Method 2:
Using JS query selector: Here I am using simple javascript to find id. Sometimes this will help us and saves some time.
DEMO: https://pradeep-dani-developer-edition.ap2.force.com/pdHome/pkHome?id=SalesforceIds_SimpleJS

<apex:page >  
 <head>
  <script language="javascript">
   function GetValue(){
                var val = document.querySelector("input[id$='inputText']"); //inputText is labelled tag id 
                document.querySelector("input[id$='inputText']").style.backgroundColor = "green";
                alert(val.value); 
   }
        
         function GetValueInputTextClass(){
                var usingClass = document.querySelector('.inputTextClass'); //inputTextClass is given style class name
                document.querySelector('.inputTextClass').style.backgroundColor = "green";
                alert(usingClass.value);                
            }
  </script>
 </head> 
 
 <apex:form id="mainForm">
        <apex:pageblock id="pageBlock">
            <apex:pageblockSection id="pageBlockSection">
                <apex:inputText id="inputText"/>                
                <apex:commandLink onclick="return GetValue();" value="inputText" rerender="mainForm"/>
                
                <apex:inputText styleClass="inputTextClass"/>
                <apex:commandLink onclick="return GetValueInputTextClass();" value="inputTextClass" rerender="mainForm"/>
            </apex:pageblockSection>
        </apex:pageblock>
    </apex:form>
    
</apex:page>

Comments

Post a Comment