3

I have a Visualforce page displaying a list of data from a custom sObject and a inputText field on the page.

onClick of the dataTable cell, I would like for the inputText field to autofill with the cell value without doing a page refresh if possible.

I am not very familiar with jQuery but gave an attempt at it which was unsuccessful. Would there be a easier way to get a cell value in the dataTable?

<apex:page StandardController="License_Request__c" extensions="Controller_OlympusLR_addSingleVoucher" recordSetVar="License_Request__c" showheader="false">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    $j = jQuery.noConflict();
    function clickElem(elem){
        alert($j(elem).find(".name").html());
        var dataCellValue = $j(elem).find(".name").html();
    }
    </script>
</head>    
<apex:form>
<apex:pageBlock>
<apex:outputPanel layout="block" style="overflow:auto;width;500px;height:300px" id="availableLRTable">
<apex:dataTable align="left" value="{!availableLR}" var="a" columnswidth="100px,100px" cellpadding="4" border="1" rendered="{!isRendered}" onRowClick="clickElem(this);">
    <apex:column headervalue="License Request Name" value="{!a.name}" styleClass="name" />
    <apex:column headervalue="License Voucher #" value="{!a.License_Voucher__c}" />
</apex:dataTable>
</apex:outputPanel>
<apex:pageBlockSection columns="2" title="Article Information" >
    <apex:inputText label="Voucher Number: " html-placeholder="<script>dataCellvalue</script>"/>
    <apex:commandButton value="Add Voucher to Project"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

4

Try this :

Note: Change the code to point back to your object, I have changed your object with Account just to test the page.

<apex:page StandardController="account" extensions="accountext_controller" recordSetVar="account">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
<apex:form >
<apex:pageBlock >
<apex:outputPanel layout="block" style="overflow:auto;width;500px;height:300px" id="availableLRTable">
<apex:dataTable align="left" value="{!Account}" var="a" columnswidth="100px,100px" cellpadding="4" border="1"  onRowClick="clickElem(this);">
    <apex:column headervalue="License Request Name">
    <apex:outputLink onclick="populatevouchernum('{!a.id}'); return false;" >{!a.id}
    </apex:outputLink>
    </apex:column>
    <apex:column headervalue="License Voucher #" value="{!a.name}" />
</apex:dataTable>
</apex:outputPanel>
<apex:pageBlockSection columns="2" title="Article Information" >
    <apex:inputText id="input_to_change" label="Voucher Number: " value="{!data_table_value}"/>
    <apex:commandButton value="Add Voucher to Project"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
function populatevouchernum(elm){
if(elm != ''){
$('[id$=input_to_change]').val(elm);
}
}
</script>
</apex:page>

enter image description here

  • @enph happy that the solution worked for you – Rao Aug 5 '14 at 14:51

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.