Apex examples-Using Javascript:
Example1: Passing values from Javascript to apex class using input hidden.
Here is the example to pass values from javascript to class we have to use a component called <apex:inputhidden>.
Visualforce page:
<apex:page sidebar=”false” controller=”jstoclassTesting1″ id=”p1″>
<script>
function js(val){
document.getElementById(‘p1:f1:hdn’).value=val;
}
</script>
<apex:form id=”f1″>
<apex:commandButton value=”ClickMe” onclick=”js(‘Welcome’)” action=”{!showValue}”/>
<apex:inputhidden value=”{!hdnValue}” id=”hdn”/>
</apex:form>
</apex:page>
class:
public with sharing class jstoclassTesting1 {
public PageReference showValue() {
system.debug(‘***** showValue is ******’+hdnValue);
return null;
}
public String hdnValue { get; set; }
}
Example2: Filtering the Records based on alphabets:
In this scenario we used apex:inputhidden and javascript for filtering records.
page1:
<apex:page sidebar=”false” id=”p1″ controller=”FilterdataClass”>
<style>
.headerRow th{
display:none;
}
</style>
<script>
function showChar(Ch){
document.getElementById(‘p1:f1:hd’).value=Ch;
}
</script>
<apex:form id=”f1″>
<apex:commandLink value=”ALL” onclick=”showChar(‘ALL’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”A” onclick=”showChar(‘A’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”B” onclick=”showChar(‘B’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”C” onclick=”showChar(‘C’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”D” onclick=”showChar(‘D’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”E” onclick=”showChar(‘E’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”F” onclick=”showChar(‘F’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”G” onclick=”showChar(‘G’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”H” onclick=”showChar(‘H’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”I” onclick=”showChar(‘I’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”J” onclick=”showChar(‘J’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”K” onclick=”showChar(‘K’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”L” onclick=”showChar(‘L’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”M” onclick=”showChar(‘M’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”N” onclick=”showChar(‘N’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”O” onclick=”showChar(‘O’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”P” onclick=”showChar(‘P’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”Q” onclick=”showChar(‘Q’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”R” onclick=”showChar(‘R’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”S” onclick=”showChar(‘S’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”T” onclick=”showChar(‘T’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”U” onclick=”showChar(‘U’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”V” onclick=”showChar(‘V’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”W” onclick=”showChar(‘W’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”X” onclick=”showChar(‘X’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”Y” onclick=”showChar(‘Y’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:commandLink value=”Z” onclick=”showChar(‘Z’)” action=”{!showValApex}” reRender=”out” status=”mystatus”/> |
<apex:inputhidden value=”{!hdnVal}” id=”hd”/>
<br/>
<apex:actionstatus id=”mystatus” startText=”loading data………”>
<apex:facet name=”stop”>
<apex:outputpanel id=”out”>
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value=”{!records}” var=”r”>
<apex:column >
{!r.Name}
</apex:column>
<apex:column >
{!r.City__c}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:outputpanel>
</apex:facet>
</apex:actionstatus>
</apex:form>
</apex:page>
class:
public with sharing class FilterdataClass {
List<Testing__c> lsttest = new List<Testing__c>();
string sQuery=”;
public List<Testing__c> getRecords() {
if(hdnVal==’ALL’)
{
sQuery=’select Id,name,city__c from Testing__c’;
}
else
{
sQuery=’select Id,name,city__c from Testing__c where name LIKE \”+hdnVal+’%\”;
system.debug(‘****** sQuery is ******’+sQuery);
}
lsttest = database.query(sQuery);
return lsttest;
}
public PageReference showValApex() {
system.debug(‘******hdnVal******’+hdnVal);
return null;
}
public String hdnVal { get; set; }
}