Learn Salesforce Java script page 1

-------------------------------------------------------------------------------------------------------------------------
java script is as simple as apex program, All we need to know is how to call the methods and how it behaves..

there are two ways to call apex actions into Java script

they are 1)Apex Action function
              2)Java script remoting


Now am using first way for making it simple...

Here i explained the below program with simple steps..
-------------------------------------------------------------------------------------------------------------------------



<apex:page controller="Samplevalid" >


    <script type="text/javascript">

    function validate()
    {
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi1.nam}').value == '')
        {
            alert("First name is mandatory");
        }
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi2.lname}').value == '')
        {
            alert("Last name is mandatory");
        }
        else
        {
            callSubmt();
            alert("Contact has been inserted");
        }
    }
 
    </script>
<!-- Javascript -->

<apex:form id="frm">

<apex:actionFunction action="{!submt}" name="callSubmt" reRender="pb"/>

    <apex:pageBlock id="pb">
        <apex:pageBlockSection id="pbs">
     
            <apex:pageBlockSectionItem ><apex:outputLabel value="First Name"/></apex:pageBlockSectionItem>
         
            <apex:pageBlockSectionItem id="pbsi1"><apex:inputText value="{!nam}" id="nam"/></apex:pageBlockSectionItem>  
                     
            <apex:pageBlockSectionItem ><apex:outputLabel value="Last Name"/></apex:pageBlockSectionItem>
         
            <apex:pageBlockSectionItem id="pbsi2"><apex:inputText value="{!lname}" id="lname"/></apex:pageBlockSectionItem>    
                                   
        </apex:pageBlockSection>
     
        <apex:pageBlockButtons >
     
            <apex:commandButton value="Insert" onclick="validate();"/>
         
        </apex:pageBlockButtons>
    </apex:pageBlock>
</apex:form>

</apex:page>

--------------------------------------------------------------------------------------------------------------------------
Controller
-------------------------------------------------------------------------------------------------------------------------



public class Samplevalid
{
 
 
 
    public Contact con= new Contact();
    public String lname{get;set;}
    public String nam{get;set;}



    public void submt()
    {
       con.FirstName=nam;
       con.LastName=lname;
        insert con;
    }  
}





Inorder get elements of any apex component(apex:form , apex:inputfield ..etc) we need to use
document.getElementById('component ids') .value

Ex:  if(document.getElementById('{!$Component.frm.pbs.pbsi1.nam}').value == '')

Here $Component is a global variable that is we are calling with dollar symbol. for calling any component id we need to use this variable.


<apex:form id="frm">

To get above  component  value we need to use id of the form.

Ex; Component.frm

<apex:pageBlock id="pb">

To get above  component  value we need to use id of the parent(apex:Form) and its id.

Ex; Component.frm.pb
.
.
.
.
.
.
.
  <apex:pageBlockSectionItem id="pbsi1"><apex:inputText value="{!nam}" id="nam"/>

To get above  component  value we need to use id's  of the parents(apex:Form, apex:pageblock ,<apex:pageBlockSection> ) and its id.

Component.frm.pbs.pbsi1.nam


Acording to our program if the value of the above component value  is null below code will display the alert..


    if(document.getElementById('{!$Component.frm.pb.pbs.pbsi1.nam}').value == '')
        {
            alert("First name is mandatory");
        }
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi2.lname}').value == '')
        {
            alert("Last name is mandatory");
        }

......


How our insert button behaves..

Here instead of calling apex action method directly we are calling javascript method  validate()  
which intern calls the original apex action method called  callSubmt() and   this callSubmt() will again calls  controller submt() method from below component

<apex:actionFunction action="{!submt}" name="callSubmt" reRender="pb"/>

 callSubmt()  actully calling apex action function by name attribute

validate(); -----> callSubmt(); ---through apex action funtion---> submt();


function validate()
    {
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi1.nam}').value == '')
        {
            alert("First name is mandatory");
        }
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi2.lname}').value == '')
        {
            alert("Last name is mandatory");
        }
        else
        {
            callSubmt();
            alert("Contact has been inserted");
        }
    }