+ Start a Discussion

JavaScript Remoting - HTML JSRender Table - Sending ID to function

Hi There,

I have a page which is designed to render a table of all the records to do with my object known as transactions. I had to go down these javascript remoting path as my previous (controller based) page was beginning to run slower, it also had to paginate in order to fit all the records on the page.

I started recreating my page, but with a combination of two javascript remoting examples that I found. I managed to get the first part of it done and dusted, displaying 2000+ records on one page, but then as I tried to create a functionality similar to that of sending a param via commandlink whcih re-renders an apex detail section.

I got my code to the point where I could input create a commandlink within my table, but upon clicking it, rather than using the Id of whichever row I clciked, it simply uses the first Id of the table. Please help me make it so that, whichever row I click a commandlink, it will display the records information at the bottom of the page.

This is what I have so far

<apex:page controller="PBE1KRemoting_Tra"   tabStyle="Transaction__c">
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
    <apex:includeScript value="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.min.js"/>
        function getTransactions(callback){
                function(result, event){
                {escape: false}
        //on document ready call query and render the template
                var html = $("#TransactionTableRowTmpl").render(result);
                //replace the table body with rendered html
  function getTransaction() {
var TraId = document.getElementById('Test1').value;

            function(result, event){
                if (event.status) {
                    // Get DOM IDs for HTML and Visualforce elements like this
                    document.getElementById('remoteAcctId').innerHTML = result.Name
                        ).innerHTML = result.Account__c;
                } else if (event.type === 'exception') {
                    document.getElementById("responseErrors").innerHTML = 
                        event.message + "<br/>\n<pre>" + event.where + "</pre>";
                } else {
                    document.getElementById("responseErrors").innerHTML = event.message;
            {escape: true}
    <!-- JS Render Template -->
    <script id="TransactionTableRowTmpl" type="text/x-jsrender">
        <tr class="dataRow" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
            <td class="dataCell"><output id="Test1" type="text">{{>Id}}</output><button onclick="getTransaction()" >Get Tra</button></td>          
            <td class="dataCell">{{>Date_of_Payment__c}}</td>
            <td class="dataCell">{{>Amount__c}}</td>
            <td class="dataCell">{{>Account__c}}</td>
            <td class="dataCell">{{>Method__c}}</td>
             <td class="dataCell">{{>Service_Name__c}}</td>
              <td class="dataCell">{{>Transaction_Type__c}}</td>
               <td class="dataCell">{{>Office__c}}</td>
    <c:PageBlockTableEnhancerADV2 targetPbTableIds="TransactionTable"/>
    <apex:pageBlock >
        <apex:sectionHeader title="Global Transactions View" subtitle="Home"/>
        <!-- Borrow some styling from Pageblock table -->
        <table class="list" border="0" cellpadding="0" cellspacing="0" id="TransactionTable">
            <thead class="rich-table-thead">
                <tr class="headerRow ">
                    <th class="headerRow">Name</th>
                    <th class="headerRow">Date</th>
                    <th class="headerRow">Amount</th>
                    <th class="headerRow">Account</th>
                    <th class="headerRow">Method</th>
                    <th class="headerRow">Service Name</th>
                    <th class="headerRow">Type</th>
                    <th class="headerRow">Office__c</th>
            <tbody id="TransactionTableBody">
    <apex:outputPanel id="Tradetails">
<apex:detail subject="{!$CurrentPage.parameters.Tid}" relatedList="True" inlineEdit="True" title="false"/>

<input id="acctSearch" type="text"/>
    <button onclick="getTransaction()">Get Account</button>
    <div id="responseErrors"></div>

    <apex:pageBlock id="block">
        <apex:pageBlockSection id="blockSection" columns="2">
            <apex:pageBlockSectionItem id="firstItem">
                <span id="remoteAcctId"/>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="acctNumEmployees"/>


public  with sharing class PBE1KRemoting_Tra {

public static Transaction__c Tra { get; set; }
public string TraId { get; set; }

    public static List<transaction__c> getTransactions(){
        return [SELECT ID, Name, Date_Of_Payment__c, Amount__c, Account__c, Method__c, Service_Name__c, Transaction_Type__c, Office__c, CreatedDate FROM Transaction__c ORDER BY Date_Of_Payment__c Desc limit 10000];
    public static Transaction__c getTransaction(String TraId) {

        // Clean up the Id parameter, in case there are spaces

        // Simple SOQL query to get the warehouse data we need
        Tra = [
            SELECT ID, Name, Date_Of_Payment__c, Amount__c, Account__c, Method__c, Service_Name__c, Transaction_Type__c, Office__c, CreatedDate
            FROM Transaction__c 
            WHERE Id = :TraId];


this is a visualforce example of what I am trying to acheive:
<apex:pageBlockTable id="pbTra" value="{!Transactions}" var="tra" rendered="{!NOT(ISNULL(transactions))}" >
<apex:column headerValue="Transaction"  >
<apex:commandLink rerender="Tradetails" oncomplete="highlightElem(this);"> {!Tra.Name}
<apex:param name="Tid" value="{!Tra.id}"/>

<apex:outputPanel id="Tradetails">
<apex:detail subject="{!$CurrentPage.parameters.Tid}" relatedList="True" inlineEdit="True" title="false"/>

Thank you for your time.