0

This is the code snippet where i am getting a javascript error :

" Uncaught TypeError: Cannot read property 'value' of null at hello (eval at _evaluateScript (3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript:81), :3:45) at HTMLInputElement.onclick (Projects:1)"

I tried working with html input tag and it works fine

<apex:outputPanel  id="projectScreen"  >    
              <apex:pageBlock  rendered="{!showWhat=='NewProject'}" mode="enter code heremainDetail" Title="On-Boarding Project">
             <script>
             function hello() {
                 if(document.getElementById('{!$Component.test}').value != null)
                 alert('hello');
                 console.log(ab);
             }
             </script>
                <apex:pageBlockSection columns="3"  rendered="{!showSection}" >
                    <apex:pageBlockSectionItem>
                    <apex:outputLabel >Select Template</apex:outputLabel>
                    <apex:inputField id="test" value="{!templateSelection.On_Boarding_Template__c}" />    
                    </apex:pageBlockSectionItem>
                    <apex:commandButton onclick="hello();"  value="Continue" reRender="projectScreen" />
1

You might have better luck using the ends with selector:

document.querySelector("[id$='test']").value

Or better yet, use style classes:

<apex:inputField styleClass="testInput" ... />

<script>
      var inputValue = document.getElementsByClassName('testInput')[0].value;
 </script>

As for why what you have doesn't work, you have to reference all the parent tags as well. If they don't have id attributes specified, it's more of a pain and not worth the trouble in my opinion, hence the above recommendations. Have a look at the Visualforce Developer Guide (emphasis mine):

Using $Component to Reference Components from JavaScript

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure.

Every Visualforce tag has an id attribute. The id attribute for a tag can be used by another tag to bind the two tags together. For example, the <apex:outputLabel> tag’s for attribute can be used with the <apex:inputField> tag’s id attribute. The reRender and status attributes on , <apex:actionSupport>, and other action-oriented components also use the value of the id attribute from other components.

In addition to being used to bind Visualforce components together, this ID is used to form part of the document object model (DOM) ID for the component when the page is rendered.

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.

See also:

Best Practices for Accessing Component IDs

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.

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure. To reference a specific Visualforce component’s DOM ID, add a component path specifier to $Component, using dot notation to separate each level in the component hierarchy of the page. For example, use $Component.itemId to reference a component at the same level in the Visualforce component hierarchy, or use $Component.grandparentId.parentId.itemId to specify a more complete component path.

A $Component path specifier is matched against the component hierarchy: At the current level of the component hierarchy where $Component is used; and then At each successive higher level in the component hierarchy, until a match is found, or the top-level of the component hierarchy is reached.

| improve this answer | |
  • Hey the second approach works for me... thanks mate ! – RAJ KIRAN Jan 11 '17 at 16:06
  • is there any reason as why it doesnt work simply by using (!$Component.test) ??? – RAJ KIRAN Jan 11 '17 at 16:07
  • Easy on the punctuation there buddy. I added more explanation pulled from the documentation. – Adrian Larson Jan 11 '17 at 16:13
2

You cannot access the component like that since the parent elements do not have ids.

Attempt to get element and then check for'undefined' before attempting to get the value.

<apex:page standardcontroller="Account" id="thePage">

<apex:form id="theForm">
    <apex:pageBlock id="theBlock">
        <apex:pageBlockSection id="theSection" columns="3">
            <apex:pageBlockSectionItem id="theItem">
                <apex:outputLabel >Select Template</apex:outputLabel>
                <apex:inputField id="test" value="{!Account.Name}" />    
            </apex:pageBlockSectionItem>
        </apex:pageblockSection>
        <button onclick="hello();" type="button">Click me</button>
    </apex:pageBlock>
</apex:form>

    <script>
         function hello() {
             var ele = document.getElementById('{!$Component.theForm.theBlock.theSection.theItem.test}')

             if(ele && ele.value.length > 0)
                 alert('hello');

             console.log(ele);
         }
         </script>

</apex:page>

Better yet, use the option Adrian suggested as it is easier to find the component.

| improve this answer | |
  • I think he won't understand without the visualforce page with the different ids set. – Martin Lezer Jan 11 '17 at 16:06
  • eric i tried that way and dint work . – RAJ KIRAN Jan 11 '17 at 16:09
  • ok got ur point..! will try that approach too – RAJ KIRAN Jan 11 '17 at 16:10
  • 1
    @RAJKIRAN - If you tried with using the PBNAME and PBSName then you are correct it would not work, they were placeholder. Added code. But i will hand hold you in a minute and write it all out – Eric Jan 11 '17 at 16:11
  • @Eric ok will wait – RAJ KIRAN Jan 11 '17 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.