-
How can we fetch data without using Controller functions on salesforce VisualForce page?
Hi All,
I am in a scenario where i need to search data using keypress action from a list of accounts and i need to use javascript function in this not controller function.Is there any way to do this.i have written the following code:
<apex:page controller=”SearchAccountJS”>
<script>
function search(){
if( name != ”){
var str=sforce.connection.query(‘SELECT id,Name,AnnualRevenue FROM Account WHERE Name like \”+name+’%\”);
records= str.getArray(“records”);
alert(‘1’+records);}
else{
var str = sforce.connection.query(‘SELECT id,Name,AnnualRevenue FROM Account’);
records=str.getArray(“records”);
alert(‘2’+records);}
</script>
<apex:form >
<apex:actionFunction name=”ApexMethod” action=”search()” rerender=”accountTable”/>
<apex:pageBlock >
<apex:outputText value=”Account Name”/>
<apex:inputText value=”{!name}” onkeyup=”ApexMethod” />
<apex:pageBlockSection id=”accountTable” columns=”3″>
<apex:pageblocktable value=”{!accounts}” var=”acc”>
<apex:column value=”{!acc.Name}”/>
<apex:column value=”{!acc.id}”/>
<apex:column value=”{!acc.AnnualRevenue}”/></apex:pageblocktable>
</apex:pageBlockSection></apex:pageBlock>
</apex:form>
</apex:page>Controller here is only used for printing list of accounts.
-
3 Replies
-
Hi sushant,
Try the following code
CONTROLLER
public with sharing class SearchJavascriptController {
public list<Account>accountlist { get; set; }
public SearchJavascriptController()
{
accountList = new list<Account>();
accountList =[Select Name,Id,AnnualRevenue From Account];
}}
VF Page
<apex:page controller=”SearchJavascriptController”>
<html>
<head>
<style>* {
box-sizing: border-box;
}#myInput {
background-image: url(‘/css/searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}#myTable th, #myTable td {
text-align: left;
padding: 12px;
}#myTable tr {
border-bottom: 1px solid #ddd;
}#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body><apex:form id=”theForm”>
<apex:pageBlock >
<h2>My Account</h2>
<input type=”text” id=”myInput” onkeyup=”myFunction()” placeholder=”Search for names..” title=”Type in a name”>
</input>
</apex:pageBlock>
<table id=”myTable”>
<tr>
<th><h1> ACCOUNT NAME</h1></th>
<th><h1> ACCOUNT ID</h1></th>
<th><h1>ANNUAL REVENUE</h1></th>
</tr>
<apex:repeat value=”{!accountList}” var=”acc” id=”theRepeat”>
<tr>
<td>{!acc.name}</td>
<td>{!acc.id}</td>
<td>{!acc.AnnualRevenue}</td>
</tr>
</apex:repeat>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById(“myInput”);
console.log(input);
filter = input.value.toUpperCase();table = document.getElementById(“myTable”);
tr = table.getElementsByTagName(“tr”);
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName(“td”)[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {tr[i].style.display = “”;
} else {
tr[i].style.display = “none”;
}
}
}
}
</script>
</apex:form>
</body>
</html></apex:page>
- [adinserter block='9']
-
Thanks
-
Besides, the Governor limits, is there a good reason to bring in all of the rows in the Account? Where will they be stored? In some server cache?
Thanks
Log In to reply.
