+ Start a Discussion
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student 

Please Help Js-Render - How to remove old html - Javascript Remoting

Hi There,

I am trying to filter my Javascript remoting page. I have the original query and it loads on page load. But then when I attempt to filter, rather than removing the old values, it merely adds the filtered results into the new table.

I need a way of which to clear the old Html from a Jsrender template and then load a new set of records into it. 

Thank you in advance for your time, any tips or points would be much appreciated.
 
<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"/>
 
    <script>
    
    
    var DocumentReady = "True";
            
        function getTransactions(callback){  
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.PBE1KRemoting_Tra.getTransactions}',
                DocumentReady, 
                function(result, event){
                     callback(result);
                     DocumentReady = "False";
                }, 
                {escape: false}
            );
        }
        
    //on document ready call query and render the template
       var j$ = jQuery.noConflict();
  
   j$(function(){
            getTransactions(function(result){
            
                var html = $("#TransactionTableRowTmpl").render(result);
                //replace the table body with rendered html
                j$("#TransactionTableBody").html(html);        
                initPageBlockTableEnhancerADV();
                
                
            });
        })

        

             

   function getTransaction(TraId) {

        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.PBE1KRemoting_Tra.getTransaction}',
            TraId, 
            function(result, event){
                if (event.status) {
                    // Get DOM IDs for HTML and Visualforce elements like this
                                     document.getElementById('remoteAcctId').innerHTML = result.Name
                    document.getElementById(
                        "{!$Component.block.blockSection.secondItem.acctNumEmployees}"
                        ).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}
        );
    }   
    

  function bump2(TraId) {
    var counter3 = document.getElementById("{!$Component.form3.counter3}");
    counter3.value = TraId;
    updateState3();
}




   function getTransactionFilter2(TraFilterId) {
   
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.PBE1KRemoting_Tra.getTransactionFilter}',
            TraFilterId, 
            function(result2, event2){
                if (event2.status) {
                    // Get DOM IDs for HTML and Visualforce elements like this
             $("#TransactionTableRowTmpl").children().remove();
                 var html2 = $("#TransactionTableRowTmpl").render(result2);
                //replace the table body with rendered html              
                j$("#TransactionTableBody").html(html2);    
                  initPageBlockTableEnhancerADV();
                } else if (event2.type === 'exception') {
                    document.getElementById("responseErrors").innerHTML = 
                        event2.message + "<br/>\n<pre>" + event2.where + "</pre>";
                } else {
                    document.getElementById("responseErrors").innerHTML = event2.message;
                }
            }, 
            {escape: true}
        );
    }   


    </script>
  
    
    <!-- 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"><button rerender="Tradetails" id="Test1"  onclick="bump2('{{>Id}}'); " >{{>Name}}</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>
        </tr>
    </script>
    
    
    <c:PageBlockTableEnhancerADV targetPbTableIds="TransactionTable"/>
    <apex:pageBlock >
        <apex:sectionHeader title="Global Transactions View" subtitle="Home"/>
        <!-- Borrow some styling from Pageblock table -->
        <apex:form id="form">
<apex:selectList id="SelectMins" size="1" onchange="getTransactionFilter2(this.value); " value="{!TraFilterId}"  >
<apex:selectOptions value="{!TraFilter}"   />
</apex:selectList>
<button rerender="TransactionTable" id="Test1"  onclick="getTransactions(); " ></button>
</apex:form>
        <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>
                </tr>
            </thead>
            <tbody id="TransactionTableBody">
            
            </tbody>     
        </table>
    </apex:pageBlock>
    




<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>
            <apex:pageBlockSectionItem id="secondItem">
                <apex:outputText id="acctNumEmployees"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
          
    </apex:pageBlock>
<apex:form id="form3">
<apex:outputPanel id="Tradetails">
<apex:actionFunction name="updateState3" reRender="Tradetails"/>
<apex:inputHidden id="counter3" value="{!controllerProperty}"/>
<apex:inputHidden id="counter4" value="{!DocumentReady}"/>

<apex:detail id="Test4" subject="{!controllerProperty}" relatedList="True" inlineEdit="True" title="false"/>
<span id="Test3"/>

</apex:outputPanel>
</apex:form>
</apex:page>

and
 
public  with sharing class PBE1KRemoting_Tra {

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



//Filter
Public String TraFilterId;

public String getTraFilterId(){return TraFilterId;}
public void setTraFilterId(String TraFilterId) {this.TraFilterId= TraFilterId;}



    @RemoteAction
    public static List<transaction__c> getTransactions(string DocumentReady){
    
    If(DocumentReady == 'True'){
  
   List<Transaction__c> Transactions = [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];
   
   If(Transactions.size() > 0){
   DocumentReady = 'False';
   return Transactions;
   }Else{
   Return null;
   }
   }Else{
   return null;
   }
   
    }
    
     @RemoteAction
    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]; 
                        
                      

        return(Tra);
    }
    
        @RemoteAction
    public static List<transaction__c> getTransactionFilter(String TraFilterId) {
    String Query = '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';
    String WhereQuery = TraFilterId;

if(TraFilterId != ''){
        return Database.query(Query+' '+WhereQuery);
}else{
        return Database.query(Query);

}
    }
    
    
   public String controllerProperty {get;set;}
   public string DocumentReady {get;set;}
   
    public PBE1KRemoting_Tra () {
        controllerProperty = null;
        DocumentReady = 'True';
    }
  
  
  String chicken = 'a0HN0000004ncjHMAQ';
    
    public list<selectoption> getTraFilter()
{
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('','All'));
      options.add(new SelectOption('','EziDebit Transactions'));
      options.add(new SelectOption('a0HN0000004ncjHMAQ','Test'));
      options.add(new SelectOption('where id=\''+                                 String.escapeSingleQuotes('a0HN0000004ncjHMAQ')+'\'','Test2'));
      

   return options;
 }    
    
   
    
}