Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.
<script>
var ele=document.getElementById('{!$Component.product_form.product_pageblock.product_section2.Search_Keyword}');
    alert('Ele = ' + ele);

</script>

<apex:form id="product_form" >
  <apex:pageBlock id="product_pageblock">  
    <apex:pageBlockSection columns="3" id="product_section2">  
    <apex:pageBlockSectionItem id="sectionitem2">
      <apex:outputLabel value="Search Keyword"/>
      <apex:inputText value="{!SearchKeyword}" id="Search_Keyword"/> 
    </apex:pageBlockSectionItem>

I want to check the size of searchKeyword entered? But the alert is returning null.What might be the problem?

share|improve this question
    
It would help if you had the Visualforce code posted so that we could compare your {!$Component} selector to the page structure. –  Peter Knolle Dec 26 '12 at 12:13
add comment

1 Answer

up vote 2 down vote accepted

View the HTML source generated by your web browser to see if the generated id for the DOM Element is what you expect it to be for the component which you are attempting to access.

Look at the Salesforce documentation Best Practices for Accessing Component IDs. That explains, with examples, how the {!$Component} notation is translated to an HTML id, with colons (:) separating the various sections in the hierarchy. It is possible that you are missing a part of the hierarchy or are accessing something inside of an iteration tag and need the iteration notation to access it.

I have found that it can be easier to assign something a class/styleClass and then use jQuery to select it by that. For example:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script type="text/javascript">
     var $j = jQuery.noConflict();
     $j(document).ready(function() {
         var searchKeyWord = $j('.Search_Keyword_Class');
         alert(searchKeyword);
     });
</script>

<apex:inputText value="{!searchKeyword}" styleClass="Search_Keyword_Class" />
share|improve this answer
1  
fixed the issue using the page source and the component Ids –  Kapil Dec 26 '12 at 14:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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