function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SivaGSivaG 

Issue with actionFunction/Javascript

Hi,

I have a problem with the javascript. I am trying to populate the end date based on the selected start date through JavaScript/actionFunction. But for some reason the end date is not populated after selecting the start date. It is displaying blank value in the end date field. I can see the end date value in debug log. Please see the below code and let me know where the issue is.

----- VFP -----
<apex:page standardController="Contact" id="thePage" extensions="Contactext">
    <apex:form id="theForm">
    <apex:actionFunction name="jsSetEndDate" action="{!actionFunctionM}" immediate="true" reRender="endtid">  
        <apex:param assignTo="{!Startdate }" value="Startdate" id="Startdate" name="enddate"/>  
    </apex:actionFunction> 
    <script>
        var startdateid;
        var enddateid;
        //var edate = '{!enddate}';
        function onchangestartdate(datevalue)
        {
             //Assign value to the no of employee field  
                    if(document.getElementById(startdateid) != null)
                    jsSetEndDate(datevalue)
                    var edate = '{!enddate}';                    
                    alert(edate);
                    //document.getElementById(enddateid).value = '{!enddate}'; 
                    document.getElementById(enddateid).value = edate; 
        }
    </script>
        <apex:pageBlock id="thePageBlk">
                <apex:repeat value="{!$ObjectType.Contact.FieldSets.Contact_Fields}" var="f" id="theRepeat">
                    <Br/><apex:inputField value="{!contact[f]}" rendered="{!IF(OR(CONTAINS(LOWER(f.label), 'start date') , CONTAINS(LOWER(f.label), 'end date')), false , true )}"/>                
                    <Br/><apex:inputField value="{!contact[f]}" onchange="onchangestartdate(this.value);" rendered="{!IF(CONTAINS(LOWER(f.label), 'start date') , true , false)}" id="stdtid"/>
                    <Br/><apex:inputField value="{!contact[f]}" rendered="{!IF(CONTAINS(LOWER(f.label), 'end date') , true , false)}" id="endtid"/>
                    <script>  
               /* 
                   Set the id for numberofemployeesID field can be used in java script 
               */
               if({!CONTAINS(LOWER(f.label), 'start date')})  
               {  
                  startdateid = '{!$Component.theRepeat}:stdtid';  
               }    
               if({!CONTAINS(LOWER(f.label), 'end date')})  
               {  
                  enddateid = '{!$Component.theRepeat}:endtid';  
               }  
                    </script>
                </apex:repeat>
        </apex:pageBlock>
    </apex:form>
</apex:page>

------ Controller ----

public with sharing class Contactext {
    public Date Startdate {get;set;}
    public Date enddate {get;set;}

    public Contactext(ApexPages.StandardController controller) {
            enddate = System.today();
    }
    public void actionFunctionM()  
    {  
       enddate = Startdate + 10;
       System.debug('End date ' + enddate );
    }

}

Thanks
Kumar
Best Answer chosen by SivaG
pconpcon
Not quite sure why you are doing it this way.  You can do it 100% with Visualforce and the Apex controller without having to get Javascript involved.

ContactExt.vfp
<apex:page standardController="Contact" id="thePage" extensions="Contactext">
    <apex:form id="theForm">
        <apex:pageBlock id="thePageBlk">
            <apex:repeat value="{!$ObjectType.Contact.FieldSets.Contact_Fields}" var="f" id="theRepeat">
                <br/>
                <apex:inputField value="{!contact[f]}" rendered="{!IF(OR(CONTAINS(LOWER(f.label), 'start date') , CONTAINS(LOWER(f.label), 'end date')), false , true )}"/>                
                <br/>
                <apex:inputField value="{!contact[f]}" rendered="{!IF(CONTAINS(LOWER(f.label), 'start date') , true , false)}" id="stdtid">
                    <apex:actionSupport event="onchange" rerender="thePageBlk" action="{!updateEndDate}" />
                </apex:inputField>
                <br/>
                <apex:inputField value="{!contact[f]}" rendered="{!IF(CONTAINS(LOWER(f.label), 'end date') , true , false)}" id="endtid"/>
            </apex:repeat>
        </apex:pageBlock>
    </apex:form>
    <script>function setFocusOnLoad() {}</script>
</apex:page>

Contactext.cls
public with sharing class Contactext {
	public Contact contact;

    public Contactext(ApexPages.StandardController controller) {
		this.contact = (Contact) controller.getRecord();
        
        this.contact.end_date__c = Date.today();
    }
    
    public PageReference updateEndDate() {
        if (this.contact.start_date__c != null) {
            this.contact.end_date__c = this.contact.start_date__c.addDays(10);
        }
        
        return null;
    }
}

If you feel you have to do this in Javascript you will need to convert your result to a date and then build a date string in the right format and pass it to DatePicker.insertDate but this has it's own problems as sometimes the datepicker will refresh and will overwrite the data you just put in.  It's safer to go w/ the pure Visualforce / Apex route.