function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student 

Javascript Remoting Static List Filter - Filtered List Issues - Tips or pointers please

Hi There,

I am attempting to create a global view of all records in regards to an object. I have made it so that I can render a list of 1000+ records on one page, I have also added the plugin PageBlockTable Enchancer by Avi. This allows me to compress the list into a pageblocktable with search functionality, etc. 

I have attempted to re-create the standard List View filter from salesforce. I have managed to get it working, however it is temperamental to say the least. My first obstacle was clearing the old List of records, as when i changed it, rather than repalcing the records, it was adding the records onto each other. E.G. list of 10 records and a list of 5, as i swapped between them, rather than going from 10 to 5, it went from 10 to 15. I managed to fix this by re-rendering the table.

My issue now is, when I change between the different list views, randomly and without warning it may un-render the results of the old list and never render the new results, leaving me with a blank table. On the other hand, just as many times, it will work perfectly.

Any pointers from people that understand javascript remotign better than I would be much aprpeciated.

Page:
 
<apex:page controller="PBE1KRemoting_Tra" extensions="FileUploader_TraEziDebit"   tabStyle="Transaction__c">
<apex:pageMessages />
    <apex:includeScript value="{!$Resource.JqueryTest}"/>
    <apex:includeScript value="{!$Resource.JsRenderTest}"/>
 <apex:includeScript value="{!$Resource.HighLight}"/>
    <script>
    
    
   
var compiledTemplate;
var NewTemplate;
var EziDebitTest;

            
        function getTransactions(callback){ 
        
         debugger;
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.PBE1KRemoting_Tra.getTransactions}',
                ' ORDER BY Date_of_Payment__c Desc limit 10000',
                function(result, event){
                     callback(result);
                      debugger;
                }, 
                {escape: false}
            );
        }
        
    //on document ready call query and render the template
     $j = jQuery.noConflict();
function highlightElem(elem){
$j(elem).parent().parent().parent().find('tr').removeClass('ui-state-highlight');
$j(elem).parent().parent().addClass('ui-state-highlight');
}

        $(function(){
         debugger;
            getTransactions(function(result){
             debugger;             
             //Attempt to convert Date with a helper function
              var html = $("#TransactionTableRowTmpl").render(result);
                //replace the table body with rendered html
                $j("#TransactionTableBody").html(html);   
              initPageBlockTableEnhancerADV();
                
            });
    
        })
        
        
        
   function getTransactionFilter2(TraFilterId) {
     updateState4();
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.PBE1KRemoting_Tra.getTransactions}',
            TraFilterId, 
            
            function(result, event){
            
         if (event.status) {
             // Get DOM IDs for HTML and Visualforce elements like this
                //replace the table body with rendered html 
        NewTemplate = $("#TransactionTableRowTmpl").render(result);
                //replace the table body with rendered html
                $j("#TransactionTableBody").html($("#TransactionTableRowTmpl").render(result));
               initPageBlockTableEnhancerADV();
    } else if (event.type === 'exception') {
                alert(event.message);
                } else {
                   alert(event.message);
                }
            }, 
            {escape: true}
        );
    }     
        

  function bump() {
  debugger;
  $("#TransactionTableBody tbody").html('');
     updateState4();
}

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

  function bump3() {
   debugger;
   initPageBlockTableEnhancerADV();
    debugger;
}

  function bump4(TraFilterId) {
    var counter4 = document.getElementById("{!$Component.form2.counter4}");
    counter4.value = TraFilterId;
}



   function getTransactionFilter(TraFilterId) {
   bump();
   
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.PBE1KRemoting_Tra.getTransactionFilter}',
            TraFilterId, 
            
            function(result, event){
            
         if (event.status) {
             // Get DOM IDs for HTML and Visualforce elements like this
                //replace the table body with rendered html 
                               NewTemplate = $("#TransactionTableRowTmpl").render(result);
                //replace the table body with rendered html
                $j("#TransactionTableBody").html($("#TransactionTableRowTmpl").render(result));
               initPageBlockTableEnhancerADV();
    } else if (event.type === 'exception') {
                alert(event.message);
                } else {
                   alert(event.message);
                }
            }, 
            {escape: true}
        );
    }     
    
    
    
     var newWin=null;
 function openAccountPopup(AccountID)
 {
  var url="/apex/DestinyAccount?id=" + AccountID;
    $jnewWin=window.open(url);
  if (window.focus)
  {
     $jnewWin.focus();
  }
    
     return false;
    }
    
     function openOfficePopup(OfficeID)
 {
  var url="/apex/DestinyOffice?id=" + OfficeID;
    $jnewWin=window.open(url);
  if (window.focus)
  {
     $jnewWin.focus();
  }
    
     return false;
    }
    
    
$.views.converters("Date", function(val) {
  var dt = new Date(val);
  var StringDate = dt.toDateString();
  return StringDate;
});



    </script>
  
    
    <!-- JS Render Template  oncomplete="highlightElem(this);"       <td class="dataCell">{{>Date_of_Payment__c}}</td> -->
    <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}}'); highlightElem(this);" >{{>Name}}</button></td>  
            <td class="dataCell">{{Date:Date_of_Payment__c}}</td> 
           
            <td class="dataCell">{{>Amount__c}}</td>
            <td class="dataCell"><a href="#" onclick="openAccountPopup('{{>Account__c}}'); return false"  >{{>Account__r.Name}}</a></td>
            <td class="dataCell">{{>Method__c}}</td>
             <td class="dataCell">{{>Service_Name__c}}</td>
              <td class="dataCell">{{>Transaction_Type__c}}</td>
               <td class="dataCell"><a href="#" onclick="openOfficePopup('{{>Office__c}}'); return false"  >{{>Office__r.Name}}</a></td>
        </tr>
    </script>
        <script id="TransactionTableRowTmp2" 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}}'); highlightElem(this);" >{{>Name}}</button></td>  
            <td class="dataCell">{{Date:Date_of_Payment__c}}</td> 
           
            <td class="dataCell">{{>Amount__c}}</td>
            <td class="dataCell"><a href="#" onclick="openAccountPopup('{{>Account__c}}'); return false"  >{{>Account__r.Name}}</a></td>
            <td class="dataCell">{{>Method__c}}</td>
             <td class="dataCell">{{>Service_Name__c}}</td>
              <td class="dataCell">{{>Transaction_Type__c}}</td>
               <td class="dataCell"><a href="#" onclick="openOfficePopup('{{>Office__c}}'); return false"  >{{>Office__r.Name}}</a></td>
        </tr>
    </script>
       
    <c:PageBlockTableEnhancerADV targetPbTableIds="TransactionTable"  pageSizeOptions="5,15,25,50,100,250" defaultPageSize="15" enableExport="False"/>
    <apex:sectionheader title="Global Transactions View" subtitle="Home"></apex:sectionheader>
    
<apex:pageBlock >

<!-- Borrow some styling from Pageblock table -->
<apex:form id="form">
 <apex:panelGrid columns="2">
                    <apex:outputLabel value="View:"/>
<apex:selectList id="TraFilter3" size="1" onchange="getTransactionFilter(this.value); " value="{!TraFilterId}"  >
<apex:selectOptions value="{!TraFilter}"   />
</apex:selectList>
                </apex:panelGrid>
                  </apex:form>
                  
                  
 <apex:outputPanel id="Tradetails2">
        <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:outputPanel>
    </apex:pageBlock>
    <apex:form id="form2">
<apex:outputPanel id="Tradetails">
<apex:actionFunction name="updateState3" reRender="Tradetails"/>
<apex:actionFunction name="updateState4" reRender="Tradetails2"/>
<apex:inputHidden id="counter3" value="{!controllerProperty}"/>
<apex:inputHidden id="counter4" value="{!TraFilterId}"/>
<apex:detail id="Test4" subject="{!controllerProperty}" relatedList="True" inlineEdit="True" title="false"/>
</apex:outputPanel>
</apex:form>
<apex:pageBlock id="pageBlock1" rendered="{!($Profile.Name=='Destiny Director')||($Profile.Name=='Financial Controller')||($Profile.Name=='Head Office Support')||($Profile.Name=='System Administrator')}" >

 <apex:form id="form3">
 <apex:pageBlockSection title="Upload EziDebit Records" collapsible="false" >
 </apex:pageBlockSection>

              <center>
               <apex:inputFile value="{!contentFile}" filename="{!nameFile}" /> 
              <apex:commandButton action="{!ReadFile}" rendered="{!IF(ISNULL(DocId),True,False)}" value="Upload File" id="theButton" style="width:70px;"/>
            <apex:commandButton rendered="{!IF(ISNULL(DocId),False,True)}" onclick="window.open('https://c.ap1.content.force.com/servlet/servlet.FileDownload?file={!DocId}');" value="Download Errors" />
             </center> 
</apex:form>
</apex:pageBlock>
</apex:page>

and controller:
 
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 TraFilter){
    
  
   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, Office__r.Name, CreatedDate,Account__r.Name FROM Transaction__c TraFilter];
return Transactions;
   }
   
    @RemoteAction
    public static List<transaction__c> getTransactionsTest(){
    
  
   List<Transaction__c> TransactionsTest = [SELECT ID, Name, Date_of_Payment__c, Amount__c, Account__c, Method__c, Service_Name__c, Transaction_Type__c, Office__c, Office__r.Name, CreatedDate,Account__r.Name FROM Transaction__c ORDER BY Date_Of_Payment__c Desc limit 10000];
   
   If(TransactionsTest.size() > 0){
   return TransactionsTest;
   }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> getTransactionFilter2(String TraFilterId) {
       List<Transaction__c> Transactions = [SELECT ID, Name, Date_of_Payment__c, Amount__c, Account__c, Account__r.Name, Method__c, Service_Name__c, Transaction_Type__c, Office__c, Office__r.Name, CreatedDate FROM Transaction__c TraFilterId];  
        return Transactions;  
    }
 
 
 
 
   @RemoteAction
    public static List<transaction__c> getTransactionFilter(String TraFilterId) {
    String Query = 'SELECT ID, Name, Date_of_Payment__c, Amount__c, Account__c, Account__r.Name, Method__c, Service_Name__c, Transaction_Type__c, Office__c, Office__r.Name, CreatedDate FROM Transaction__c';
    String WhereQuery = TraFilterId;
    String Filter = ' ORDER BY Date_of_Payment__c Desc limit 10000';

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

}
    }
 
 
    
    
   public String controllerProperty {get;set;}
   
    public PBE1KRemoting_Tra () {
        controllerProperty = null;
        TraFilterId = '';
    }
  
    
    public list<selectoption> getTraFilter()
{
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('','All'));
      options.add(new SelectOption('where Method__c=\''+                                 String.escapeSingleQuotes('EZIDEBIT')+'\'','EziDebit Transactions'));
      options.add(new SelectOption('where transaction_type__c=\''+                                 String.escapeSingleQuotes('First Payment')+'\'','First Payments'));
      options.add(new SelectOption('where transaction_type__c=\''+                                 String.escapeSingleQuotes('Part Payment')+'\'','Part Payments'));
      options.add(new SelectOption('where transaction_type__c=\''+                                 String.escapeSingleQuotes('Final Payment')+'\'','Final Payments'));
      options.add(new SelectOption('where transaction_type__c=\''+                                 String.escapeSingleQuotes('Refund')+'\'','Refunds'));
      options.add(new SelectOption('Test1','Test1'));
      

   return options;
 }    

   
    
}

Thank you in advance