Apex Code Development You need to sign in to do that
Don't have an account?
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:
and controller:
Thank you in advance
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