Method called from JS using Action function

In below example we are going to show you how you can call method from JS using ActionFunction

Flow Chart:-

1:- On click Radio button line 14 VF page ==> "javascript1()"

2:-Script call at line no 4 VF page ==> function javascript1()

3:- Function call at line no 5 VF page ==> ActionFunctionName();

4:- Now it goes to line no 10 ==>
      <apex:actionfunction name="ActionFunctionName" 
       action="{!ActionFunctionMeth}" rerender="ReftxtId"/>

5:-It will call action/Method  at line no 10 .{!ActionFunctionMeth}

6:- Now Method in Controller at line no 6 will update value in MyString variable .

7:- Updated value of MyString will shown to user using below code at line no 18 in VF page.

      <apex:outputText value="{!MyString}" id="ReftxtId"></apex:outputText>


 Controller Code:-

1 2 3 4 5 6 7 8 9 10

Public class ExmplActionFunction { Public string MyString{get;set;} public ExmplActionFunction (){} public string ActionFunctionMeth(){ MyString = 'Method called from js using Action function After clicking on Radio Button'; return null; } }

Visualforce page :-

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<Apex:page controller="ExmplActionFunction"> <script> function javascript1(){ ActionFunctionName(); } </script> <apex:form > <apex:actionfunction name="ActionFunctionName" action="{!ActionFunctionMeth}" rerender="ReftxtId"/> <apex:pageblock > <apex:outputLabel value="Click on Radio Button Below to call Contoller method from js using ActionFunction"></apex:outputLabel> <apex:selectRadio onclick="javascript1()" ></apex:selectRadio><p/> </apex:pageblock> <apex:pageblock > <apex:outputText value="{!MyString}" id="ReftxtId"></apex:outputText> </apex:pageblock> </apex:form> </apex:page>

 User Interface :-