How do we get a id of field from a apex:pageBlockTable?

Question

I have a pageblocktable where i do have some input fields which also has a apex:inputtext and has a lookup icon on click of which i am calling up the native lookup.

The issue i am having is with the passing of id of the field to lookup. With the way i am the definition of the ids the id of the inputtext field is

ConvertwithInputs:pbmconvertInput:pbformmconvertInput:pbsmconvertInput:pbspbtable:0:vField_AccountName_lkid ConvertwithInputs:pbmconvertInput:pbformmconvertInput:pbsmconvertInput:pbspbtable:1:vField_AccountName_lkid

0 and 1 which are bolded out are the row nos. These are added to the controls while using pageblocktable dynamically.

I need to pass this into a javascript function when the lookup icon is clicked.

function showLookup(ctrlID,objKeyPrefix) 
    { 
        openLookup("/_ui/common/data/LookupPage?lkfm=ConvertwithInputs:pbmconvertInput:pbformmconvertInput&lknm="+ ctrlID +"&lktp="+objKeyPrefix,500);           
     }

<apex:inputText id="vField_AccountName_lkid" value="{!s.selectedAccount}"/>
<apex:image url="/s.gif" alt="Lookup (New Window)" styleClass="lookupIcon" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" onclick="javascript:showLookup(CTRL ID,'001')" title="Lookup (New Window)"/>

These inputText and apex:image are within a pageblocktable so for each row the same id is generated but with the row number changing dynamically.

Is there a way i can dynamically assign the id of the inputText field with the lookup icon

Any pointers would be great

Answer 1

have a look into the VF documentation
Best Practices for Accessing Component IDs http://www.salesforce.com/us/developer/docs/pages/Content/pages_best_practices_accessing_id.htm

pass your Id to a 'proxy' method that will get the elements value and call your showLookupFor or merge both functions

function showLookupForId(lkid_id,objKeyPrefix){
    showLookup(
          document.getElementById(lkid_id).value
        , objKeyPrefix);
}

function showLookup(ctrlID,objKeyPrefix) 
    { 
        openLookup("/_ui/common/data/LookupPage?lkfm=ConvertwithInputs:pbmconvertInput:pbformmconvertInput&lknm="+ ctrlID +"&lktp="+objKeyPrefix,500);           
     }

<apex:inputText id="vField_AccountName_lkid" value="{!s.selectedAccount}"/>
<apex:image url="/s.gif" alt="Lookup (New Window)" styleClass="lookupIcon" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';"
onclick="javascript:showLookupForId({!$Component.<PATH>},'001')" title="Lookup (New Window)"/>

Answer 2

A good shortcut is by using jQuery and adding a fake styleclass:

var input = $('.myInput');

In addition you need to user apex:variable to know what row index has been clicking.

Declare your index variable before the pageBlockTable:

 <apex:variable value="{!1}" var="rowIndex" />

Use it by default reference:

  {!rowIndex}

Finally, increment it before pageBlockTable block is closed:

<apex:variable var="rowIndex" value="{!rowIndex + 1}"/>

The bad news is show should change the pageBlockTable by repeat, because apex:variable doesn't work on dataTables.

The complete example to how get the row input value by javascript is:

 <apex:page standardController="Account">
     <apex:pageBlock title="My Content">
            <apex:variable value="{!1}" var="rowIndex" />
            <apex:repeat value="{!account.Contacts}" var="item">
                <apex:outputText value="{!item.name}"/> 
                <apex:form >
                   <apex:inputText styleClass="row-{!rowIndex}" value="{!item.email}"/>
                </apex:form> 
                 <apex:outputText value="{!rowIndex}"/> 
                <apex:image url="/s.gif" alt="Lookup (New Window)" styleClass="lookupIcon" onclick="doWhateverUneed({!rowIndex})"/>
                <apex:variable var="rowIndex" value="{!rowIndex + 1}"/>   
            </apex:repeat>

        </apex:pageBlock> 
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script>
            function doWhateverUneed(index){
                alert('the value you are looking for is:'+$('.row-'+index).val());
            }
        </script>
    </apex:page>

More detailed info about how to get row index here