Apex Code Development You need to sign in to do that
Don't have an account?
issue with actionFunction and jscript
Hi everyone...
its a simple program to add and subtract two values and display the result in the third...using actionFunction and jscript
no output displayed...
here is the code...
VF code...
<apex:page controller="arithmatic" >
<script>
function java_add()
{
alert('entered add1 jscript')
call_add();
}
function java_sub()
{
alert('entered sub1 jscript')
call_sub();
}
</script>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockSectionItem >
<apex:inputText id="Value1" value="{!value1}"/>
<apex:inputText id="Value2" value="{!value2}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:commandButton value="add" onclick="java_add();"/>
<apex:actionFunction name="call_add" action="{!addition}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:commandButton value="sub" onclick="java_sub();"/>
<apex:actionFunction name="call_sub" action="{!subtraction}"/>
</apex:pageBlockSectionItem>
<apex:outputlabel id="Value3" value="{!value3}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Apex code...
public with sharing class arithmatic {
public PageReference addition() {
return null;
}
public PageReference subtraction() {
return null;
}
public integer addition{set;}
public integer subtraction{set;}
public integer value3 { get;set; }
public integer value2 { get; set; }
public integer value1 { get; set; }
public integer getaddition(){
value3 = value1 + value2;
return null;
}
public integer getsubtraction(){
value3 = value1 - value2;
return value3;
}
}
its a simple program to add and subtract two values and display the result in the third...using actionFunction and jscript
no output displayed...
here is the code...
VF code...
<apex:page controller="arithmatic" >
<script>
function java_add()
{
alert('entered add1 jscript')
call_add();
}
function java_sub()
{
alert('entered sub1 jscript')
call_sub();
}
</script>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockSectionItem >
<apex:inputText id="Value1" value="{!value1}"/>
<apex:inputText id="Value2" value="{!value2}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:commandButton value="add" onclick="java_add();"/>
<apex:actionFunction name="call_add" action="{!addition}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:commandButton value="sub" onclick="java_sub();"/>
<apex:actionFunction name="call_sub" action="{!subtraction}"/>
</apex:pageBlockSectionItem>
<apex:outputlabel id="Value3" value="{!value3}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Apex code...
public with sharing class arithmatic {
public PageReference addition() {
return null;
}
public PageReference subtraction() {
return null;
}
public integer addition{set;}
public integer subtraction{set;}
public integer value3 { get;set; }
public integer value2 { get; set; }
public integer value1 { get; set; }
public integer getaddition(){
value3 = value1 + value2;
return null;
}
public integer getsubtraction(){
value3 = value1 - value2;
return value3;
}
}
I have modified the code a bit to correct the issues.
You will have to pass the values entered in the textboxes to the javascript function called in onclick().
onclick="java_add('{!$Component.Section1.SectionItem1.Value1}','{!$Component.Section1.SectionItem1.Value2}');return false;">
Write the corresponding code in the js function java_add(val1id, val2id) to fetch the values in the textboxes,
and pass these values to the actionFunction method called - call_add(). Pass the parameters to the controller method via <apex:param> tag.
Also here commandbutton and the actionfunction components will both try to submit the form. To stop the normal behaviour of the commandbutton
return false from the onclick() method.
Visualforce Page:
<apex:page controller="Arithmetic">
<script>
function java_add(val1id, val2id)
{
alert('entered add1 jscript');
var val1,val2;
val1 = document.getElementById(val1id).value;
val2 = document.getElementById(val2id).value;
call_add(val1, val2);
}
function java_sub(val1id, val2id)
{
alert('entered sub1 jscript');
var val1,val2;
val1 = document.getElementById(val1id).value;
val2 = document.getElementById(val2id).value;
call_sub(val1, val2);
}
</script>
<apex:form >
<apex:pageblock >
<apex:pageBlockSection id="Section1">
<apex:pageblockSectionItem id="SectionItem1">
<apex:inputtext id="Value1" value="{!Num1}"/>
<apex:inputtext id="Value2" value="{!Num2}"/>
</apex:pageblockSectionItem>
<apex:commandButton value="Add" onclick="java_add('{!$Component.Section1.SectionItem1.Value1}','{!$Component.Section1.SectionItem1.Value2}');return false;">
<apex:actionFunction name="call_add" action="{!Addition}">
<apex:param name="firstparam" assignTo="{!Num1}" value=""/>
<apex:param name="secondparam" assignTo="{!Num2}" value=""/>
</apex:actionFunction>
</apex:commandButton>
<apex:commandButton value="Subtract" onclick="java_sub('{!$Component.Section1.SectionItem1.Value1}','{!$Component.Section1.SectionItem1.Value2}');return false;">
<apex:actionFunction name="call_sub" action="{!Subtraction}">
<apex:param name="firstparam" assignTo="{!Num1}" value=""/>
<apex:param name="secondparam" assignTo="{!Num2}" value=""/>
</apex:actionFunction>
</apex:commandButton>
<apex:outputLabel id="Value3" value="{!Total}"/>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Controller:
public class Arithmetic
{
public void Subtraction()
{
Total = Num1 - Num2;
System.debug('Subtracted Value'+Total );
}
public void Addition()
{
Total = Num1 + Num2;
System.debug('Added Value'+Total );
}
public Integer Num1 { get; set; }
public Integer Num2 { get; set; }
public Integer Total { get; set; }
}
Hope this helps.
Lakshmi.
All Answers
public integer getaddition(){
value3 = value1 + value2;
return null;}
Is the substraction function working?
I've tried it in both ways....by returning value and returning null...
today ive checked and found that the control is not invoking the apex method.....
Any specific reason you are using java script when you can directly call the controller method in the commandbutton action attribute:
<apex:commandButton value="add" action="{!addition}" />
different buttons should work for different functionality...
in my project two buttons were performing same action...
thats why i have used actionFunction tag...
moreover i dont want pagereferences...
<apex:commandButton value="add" action="{!addition}" />
<apex:commandButton value="add" action="{!subtraction}" />
public integer getaddition(){
value3 = value1 + value2;
return null;
}
public integer getsubtraction(){
value3 = value1 - value2;
return value3;
}
Did you try this?
tried...its working...
but my aim is to use actionFunction...not action attribute of command button...
I have modified the code a bit to correct the issues.
You will have to pass the values entered in the textboxes to the javascript function called in onclick().
onclick="java_add('{!$Component.Section1.SectionItem1.Value1}','{!$Component.Section1.SectionItem1.Value2}');return false;">
Write the corresponding code in the js function java_add(val1id, val2id) to fetch the values in the textboxes,
and pass these values to the actionFunction method called - call_add(). Pass the parameters to the controller method via <apex:param> tag.
Also here commandbutton and the actionfunction components will both try to submit the form. To stop the normal behaviour of the commandbutton
return false from the onclick() method.
Visualforce Page:
<apex:page controller="Arithmetic">
<script>
function java_add(val1id, val2id)
{
alert('entered add1 jscript');
var val1,val2;
val1 = document.getElementById(val1id).value;
val2 = document.getElementById(val2id).value;
call_add(val1, val2);
}
function java_sub(val1id, val2id)
{
alert('entered sub1 jscript');
var val1,val2;
val1 = document.getElementById(val1id).value;
val2 = document.getElementById(val2id).value;
call_sub(val1, val2);
}
</script>
<apex:form >
<apex:pageblock >
<apex:pageBlockSection id="Section1">
<apex:pageblockSectionItem id="SectionItem1">
<apex:inputtext id="Value1" value="{!Num1}"/>
<apex:inputtext id="Value2" value="{!Num2}"/>
</apex:pageblockSectionItem>
<apex:commandButton value="Add" onclick="java_add('{!$Component.Section1.SectionItem1.Value1}','{!$Component.Section1.SectionItem1.Value2}');return false;">
<apex:actionFunction name="call_add" action="{!Addition}">
<apex:param name="firstparam" assignTo="{!Num1}" value=""/>
<apex:param name="secondparam" assignTo="{!Num2}" value=""/>
</apex:actionFunction>
</apex:commandButton>
<apex:commandButton value="Subtract" onclick="java_sub('{!$Component.Section1.SectionItem1.Value1}','{!$Component.Section1.SectionItem1.Value2}');return false;">
<apex:actionFunction name="call_sub" action="{!Subtraction}">
<apex:param name="firstparam" assignTo="{!Num1}" value=""/>
<apex:param name="secondparam" assignTo="{!Num2}" value=""/>
</apex:actionFunction>
</apex:commandButton>
<apex:outputLabel id="Value3" value="{!Total}"/>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Controller:
public class Arithmetic
{
public void Subtraction()
{
Total = Num1 - Num2;
System.debug('Subtracted Value'+Total );
}
public void Addition()
{
Total = Num1 + Num2;
System.debug('Added Value'+Total );
}
public Integer Num1 { get; set; }
public Integer Num2 { get; set; }
public Integer Total { get; set; }
}
Hope this helps.
Lakshmi.
It worked and I understood the importance of passing parameters when using JScript...
That's great. :-)
Do mark the 'Best Answer' so that others searching for a similar issue can benefit from the thread.
Lakshmi.