alert
=========
<apex:page >
<apex:outputLabel value="Line One" />
<script>
var a=10;
var b=20;
var c=a+b;
alert('C value '+c);
</script>
<apex:outputLabel value="Line Two" />
</apex:page>
Confirm Box :
=============
<apex:page >
<script>
// confirm box will return u true or false
var result=confirm('Should i save');
alert(result);
</script>
</apex:page>
Prompt :
==========
<apex:page >
<script>
// prompt is used to fetch the data from user
var name=prompt('Enter Name','Name');
alert(name);
</script>
</apex:page>
parsing Values :
=================
<apex:page >
<script>
// Data read from the promt will be in the string format
var a=prompt('Enter A value',0);
var b=prompt('Enter B Value',0);
var result=a+b;
// parseInt() will convert the string value into corresponding integer value
var sum=parseInt(a)+parseInt(b);
alert('Result :'+result+' :: Sum :'+sum);
</script>
</apex:page>
Declaration of Array Values :
=================================
<apex:page >
<script>
//static Declaration of Array
var marks=[10,20,30];
alert(marks);
// When the size of the array is know we can declare blank later push the elements
// into array
var names=[];
names.push('sam');
names.push('ram');
alert(names);
// We can insert the elements into array using index
var ages=[];
ages[0]=10;
ages[1]=20;
alert(ages);
// we can create array using the new Array(size)
var cities=new Array(3);
cities[0]='Hyd';
cities[1]='Ban';
alert(cities);
// Static Declaration of array with values
var places=new Array('SRNagar','LBNagar');
alert(places);
</script>
</apex:page>
========================================
functions : functions in the javascript will be invoked when ever an event
occurs in the form of the page
Events : onchange,onclick,onDbClick,onfocus,onblur,.....
syntax : function funtionName(parameters){
// logic
return value;
}
Example : 1
<apex:page >
<script>
function show(){
alert('This is click');
}
function focus1(){
alert('On Focus Click');
}
function complete(){
alert('On complete');
}
</script>
<apex:form>
<apex:commandButton value="onclick" onclick="show()"/>
<apex:inputText onfocus="focus1()" />
<apex:commandButton value="oncomplete" onclick="show()" oncomplete="complete()" />
</apex:form>
</apex:page>
Passing parameters:
<script>
function call1(){
alert('test');
}
function globalcall(name){
alert(name);
}
function idcall(myid){
alert(myid);
}
funtion expCall(name){
alert(name);
}
</script>
<apex:form id="fm">
<apex:commandButton value="Static" onclick="call1()" />
<apex:commandButton value="Global" onclick="globalcall('{!$User.LastName}')" />
<apex:commandButton value="Expression" onclick="expCall('{! 'sam' &'kiran'}')" />
<apex:commandButton value="ID call" id="b4" onclick="idcall(this.id)"/>
</apex:form>
</apex:page>
=====================================
Reading the values from the vf components into the javascript
document.getElementById(pathof componentid).value;
Example 1:
<apex:page id="page">
<script>
function show(){
var myname=document.getElementById('page:fm:pb:name').value;
alert(myname);
}
function getData(){
var password=document.getElementById('page:fm:pb:pbs:pbsi:pass').value;
alert(password);
}
</script>
<apex:form id="fm">
<apex:pageBlock title="PageBlock" id="pb">
<apex:outputLabel value="Enter Name" />
<apex:inputText id="name" onchange="show()"/>
<apex:pageBlockSection id="pbs">
<apex:pageBlockSectionItem id="pbsi">
<apex:outputLabel value="Enter Password" />
<apex:inputText id="pass" onchange="getData()"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Set the values to Visualforce components :
==========================================
<apex:page id="page">
<script>
function show(){
document.getElementById('page:fm:pb:result').innerHTML='<h1> This is test</h1>';
document.getElementById('page:fm:pb:name').value='This a test';
}
</script>
<apex:form id="fm">
<apex:pageBlock title="PageBlock" id="pb">
<apex:outputLabel id="result" /> <br/>
<apex:inputText id="name" />
<apex:commandButton value="click" onclick="show()" />
</apex:pageBlock>
</apex:form>
</apex:page>
ActionFuction :
public class FuntionExample {
public String result {set;get;}
public string name {set;get;}
public void show(){
result=' This is a call from :'+name;
}
}
<apex:page controller="FuntionExample">
<apex:form id="one">
<script>
function javafun(){
callme();
}
</script>
<apex:actionFunction name="callme" action="{!show}" reRender="one" />
<apex:commandButton value="click" oncomplete="javafun()" />
{!result}
</apex:form>
</apex:page>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<apex:page id="page" controller="javaScript">
<script>
function show(){
var name=document.getElementById('page:fm:pb:pbs:pbs1:name').value;
var hidden=document.getElementById('page:fm:pb:pbs:pbs2:hidden').value;
document.getElementById('page:fm:pb:pbs:pbs3:myname').value=name;
document.getElementById('page:fm:pb:pbs:pbs4:result').innerHTML='Name :'+name+'<br/> Hidden:'+hidden;
}
</script>
<apex:form id="fm">
<apex:pageBlock id="pb">
<apex:pageBlockSection id="pbs">
<apex:pageBlocksectionItem id="pbs1">
<apex:outputLabel value="InputText "/>
<apex:inputText id="name"/>
</apex:pageBlocksectionItem>
<apex:pageBlocksectionItem id="pbs2">
<apex:outputLabel value="InputHidden "/>
<apex:inputHidden id="hidden" value="{!hidden }"/>
</apex:pageBlocksectionItem>
<apex:pageBlocksectionItem id="pbs3">
<apex:outputLabel value="Entered Name "/>
<apex:inputText id="myname"/>
</apex:pageBlocksectionItem>
<apex:pageBlocksectionItem id="pbs4">
<apex:outputLabel id="result"/>
</apex:pageBlocksectionItem>
</apex:pageBlockSection>
<apex:commandButton value="Submit" oncomplete="show()" />
</apex:pageBlock>
</apex:form>
</apex:page>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Scenario :
Create a VF page as given below
1.When you click on AddMore button four more should be added to the pageBlockTable
2.When you enter the quantity and price value it should automatically calculate the total value and display the total
When we click on add button on the row new row should be created below the row selected
with same values
When you click on del button that row should be deleted from the pageblockTable
Code: Class :javascriptExam
public class JavaScriptExam {
public List<Product> products{set;get;}
public Integer rowNo{set;get;}
public javascriptExam(){
products=new List<Product>();
addProducts();
}
public void addProducts(){
for(Integer i=0;i<=3;i++){
Product p=new Product();
p.total=0;
products.add(p);
}
}
public void addRow(){
Product p=products.get(rowNo);
if(rowno+1<products.size())
products.add(rowno+1,p);
else
products.add(p);
}
public void removeRow(){
products.remove(rowNo);
}
public class product{
public string pname {set;get;}
public Integer quant {set;get;}
public Decimal price {set;get;}
public Decimal total {set;get;}
}
}
Visualforce page:
<apex:page controller="JavaScriptExam" id="page">
<script>
function find(myid){
var rowid=myid.split(':');
document.getElementById('page:fm:pb:pbt:'+rowid[4]+':sec').value=rowid[4];
}
function show(myid){
var rowid=myid.split(':');
var quant=document.getElementById('page:fm:pb:pbt:'+rowid[4]+':quant').value;
var price=document.getElementById('page:fm:pb:pbt:'+rowid[4]+':price').value;
var total=quant*price;
document.getElementById('page:fm:pb:pbt:'+rowid[4]+':total').value=total;
}
</script>
<apex:form id="fm">
<apex:pageBlock title="Product List" id="pb">
<apex:pageBlockTable value="{!products}" var="a" id="pbt">
<apex:column headerValue="Product Name">
<apex:inputText value="{!a.pname}" id="pname" />
</apex:column>
<apex:column headerValue="Quantity">
<apex:inputText value="{!a.quant}" size="4" id="quant" onchange="show(this.id)" />
</apex:column>
<apex:column headerValue="Price">
<apex:inputText value="{!a.price}" size="4" id="price" onchange="show(this.id)" />
</apex:column>
<apex:column headerValue="Total">
<apex:inputText value="{!a.total}" id="total" />
</apex:column>
<apex:column headerValue="Action">
<apex:commandButton value="Add" id="b1" onclick="find(this.id)" action="{!addRow}" />
<apex:commandButton value="Del" id="b2" onclick="find(thid.id)" action="{!removeRow}"/>
<apex:inputHidden value="{!rowno}" id="sec"/>
</apex:column>
</apex:pageBlockTable>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="AddMore" action="{!addProducts}" />
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<apex:page controller="javascriptList" id="page">
<script>
function getNo(myid){
var recid=myid.split(':');
document.getElementById('page:fm:rno').value=recid[4];
}
function show(myid){
var recid=myid.split(':');
var price= document.getElementById('page:fm:pb:pbt:'+recid[4]+':price').value;
var quant=document.getElementById('page:fm:pb:pbt:'+recid[4]+':quant').value;
var total=price*quant;
document.getElementById('page:fm:pb:pbt:'+recid[4]+':total').value=total;
}
</script>
<apex:form id="fm">
<apex:inputHidden value="{!rowno}" id="rno" />
<apex:pageBlock title="Product" id="pb">
<apex:pageBlockTable value="{!products}" var="a" id="pbt" >
<apex:column >
<apex:facet name="header"><apex:inputCheckBox /></apex:facet>
<apex:inputCheckBox value="{!a.flag}" />
</apex:column>
<apex:column headerValue="Product Name">
<apex:inputText value="{!a.name}" id="name" />
</apex:column>
<apex:column headerValue="Price">
<apex:inputText value="{!a.price}" id="price" onchange="show(this.id)" size="5" />
</apex:column>
<apex:column headerValue="Quantity">
<apex:inputText value="{!a.quant}" id="quant" onchange="show(this.id)" size="5"/>
</apex:column>
<apex:column headerValue="total" >
<apex:inputText id="total" value="{!a.total}" size="5" />
</apex:column>
<apex:column headerValue="Add|Del">
<apex:commandButton value="add" id="b1" action="{!addRow}" onclick="getNo(this.id)" />
<apex:commandButton value="del" id="b2" action="{!removeRow}" onclick="getNo(this.id)"/>
</apex:column>
</apex:pageBlockTable>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="AddMore" action="{!addMore}" />
<apex:commandButton value="submit" action="{!submit}" />
<apex:commandButton value="DeleteRows" action="{!multipleRows}" />
</apex:pageBlockButtons>
{!nos}
</apex:pageBlock>
</apex:form>
</apex:page>
Apex: Class
public class javascriptList {
public List<ProductWrap> products{set;get;}
public List<ProductWrap> selected {set;get;}
public Integer rowno{set;get;}
public List<Integer> nos{Set;get;}
public javascriptList(){
products=new List<ProductWrap>();
addMore();
}
public void addMore(){
for(Integer i=0;i<4;i++){
ProductWrap pw=new ProductWrap();
products.add(pw);
}
}
public pageReference submit(){
selected=new List<Productwrap>();
for(ProductWrap p:products){
if(p.flag==true){
selected.add(p);
}
}
PageReference p=new pageReference('/apex/selectedpage');
return p;
}
public void addRow(){
ProductWrap p=products.get(rowno);
if(rowno+1 <products.size()){
products.add(rowno+1,p);
}
else{
products.add(p);
}
}
public void removeRow(){
products.remove(rowno);
}
public void multipleRows(){
nos=new List<Integer>();
for(Integer i=0;i<products.size();i++){
ProductWrap p =products.get(i);
if(p.flag==true){
nos.add(i);
}
}
integer x=0;
for(Integer n:nos){
if(x<=0)
products.remove(n);
else{
products.remove(n);
}
}
}
public class ProductWrap{
public String name {set;get;}
public Decimal price {set;get;}
public Integer quant {set;get;}
public Boolean flag {Set;get;}
public Decimal total{Set;get;}
}
}
VF page2
<apex:page controller="javascriptList" renderAs="pdf">
<apex:image value="{!$Resource.satish}" />
<h1>
Products Purchased
</h1>
<table width="100%">
<tr style="background:#848484;">
<td>Name </td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<apex:repeat value="{!selected}" var="a">
<tr >
<td>{!a.name}</td>
<td>{!a.price}</td>
<td>{!a.quant}</td>
<td>{!a.total}</td>
</tr>
</apex:repeat>
</table>
</apex:page>
No comments:
Post a Comment