You need to sign in to do that
Don't have an account?
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.
and
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; } }