+ Start a Discussion
vishnu kalathuru 9vishnu kalathuru 9 

Jquery datepicker() is not working after page reRender.

First time during the page only it is working after page rerender it is not working. please help..

VF page:
<apex:page controller="DatePickingClass" docType="html-5.0">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <apex:form >
            <apex:pageBlock >
                <apex:pageBlockSection columns="2">
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Filter By"/>
                    </apex:pageblockSectionItem> 
                           
                    <apex:pageblockSectionItem > 
                        <apex:actionFunction name="setValue" action="{!FetchEventByRanges}" reRender="selectedValue">
                            <apex:param name="x" value="" assignTo="{!eventByDate}" />
                        </apex:actionFunction>
                        <select onchange="setValue(this.value)">
                            <option value="EBD">Events By Date</option>
                            <option value="EBDR">Events By Date Range</option>
                            <option value="EBM">Events By Month</option>
                        </select>                   
                    </apex:pageblockSectionItem>
                    
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Range"/>
                    </apex:pageblockSectionItem>
                    
                    <apex:outputPanel id="selectedValue">            
                        <apex:pageblockSectionItem rendered="{!!selectionflag}">
                            <apex:selectList size="1" value="{!eventByRange}" >
                                <apex:selectOptions value="{!EventByRangeOptions}"/>
                            </apex:selectList>
                        </apex:pageblockSectionItem>
                        <apex:outputpanel rendered="{!selectionflag}">
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="From Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!StartDate}" id="datepickerFrom"/>
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="To Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!EndDate}" id="datepickerTo"/>
                        </apex:outputpanel>
                    </apex:outputPanel>             
                </apex:pageBlockSection>        
            </apex:pageBlock>
        </apex:form>
<script>
    var j$ = jQuery.noConflict();
    
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd<10) {
       dd='0'+dd
    } 
    if(mm<10) {
       mm='0'+mm
    } 
    today = mm+'/'+dd+'/'+yyyy;
    
    var date = new Date(), y = date.getFullYear(), m = date.getMonth();
    var firstDay = new Date(y, m, 1);
    var lastDay = new Date(y, m + 1, 0);
    
    var ldd = lastDay.getDate();
    var lmm = lastDay.getMonth()+1;
    var lyyyy = lastDay.getFullYear();
    if(ldd<10) {
       ldd='0'+ldd
    } 
    if(lmm<10) {
       lmm='0'+lmm
    } 
    lastDay = lmm+'/'+ldd+'/'+lyyyy;
    
    j$(document).ready(function($) {
       j$('[id$=datepickerFrom]').val(today);
       j$('[id$=datepickerTo]').val(lastDay);
       j$('[id$=datepickerFrom]').datepicker()
       j$('[id$=datepickerTo]').datepicker()
    });
</script>
</apex:page>

Apex Class:
public class DatePickingClass
{
    public String eventByDate{get;set;}
    public String eventByRange{get;set;} 
    
    public List<SelectOption> EventByRangeOptions{get;set;}
    public string StartDate{get;set;}
    public string EndDate{get;set;}
    public Boolean selectionflag{get;set;}
    
    public DatePickingClass()
    {
//       StartDate = String.valueOf(system.today());
       selectionflag = true;
    }
    
    public void FetchEventByRanges(){
        EventByRangeOptions = new List<SelectOption>();    
        if(eventByDate == 'EBDR')
        {   
            selectionflag = false;    
            EventByRangeOptions.add(new SelectOption('U7Days','Upcoming 7 Days'));
            EventByRangeOptions.add(new SelectOption('U30Days','Upcoming 30 Days'));
        }
        else if(eventByDate == 'EBD')
        {       
            selectionflag = true;
        }
        else
        {
            EventByRangeOptions.add(new SelectOption('None','--- None ---'));
        }    
    }
}

Thanks 
Vishnu
Pankaj_GanwaniPankaj_Ganwani
Hi Vishnu,

Just try to include script in outpanel as well which you are refreshing after selection:

<apex:outputPanel id="selectedValue">            
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
                        <apex:pageblockSectionItem rendered="{!!selectionflag}">
                            <apex:selectList size="1" value="{!eventByRange}" >
                                <apex:selectOptions value="{!EventByRangeOptions}"/>
                            </apex:selectList>
                        </apex:pageblockSectionItem>
                        <apex:outputpanel rendered="{!selectionflag}">
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="From Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!StartDate}" id="datepickerFrom"/>
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="To Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!EndDate}" id="datepickerTo"/>
                        </apex:outputpanel>
                    </apex:outputPanel>             
vishnu kalathuru 9vishnu kalathuru 9

Hi Pankaj,

Thankyou very much....I used HTML5 input tag with attribute type='date' for achieving the functioanlity. By using this we no need to go for Jquery/Javascript. Please find below code highlited in bold....may help for any one who is facing similar issue.

VF Page:
<apex:page controller="DatePickingTest" docType="html-5.0">
            <apex:form >
            <apex:pageBlock >
                <apex:pageBlockSection columns="2">
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Filter By"/>
                    </apex:pageblockSectionItem> 
                           
                    <apex:pageblockSectionItem > 
                        <apex:actionFunction name="setValue" action="{!FetchEventByRanges}" reRender="selectedValue">
                            <apex:param name="x" value="" assignTo="{!eventByDate}" />
                        </apex:actionFunction>
                        <select onchange="setValue(this.value)">
                            <option value="EBD">Events By Date</option>
                            <option value="EBDR">Events By Date Range</option>
                            <option value="EBM">Events By Month</option>
                        </select>                   
                    </apex:pageblockSectionItem>
                        
                        <apex:pageblockSectionItem >
                           <apex:outputLabel value="Range"/>
                        </apex:pageblockSectionItem>

                    <apex:outputPanel id="selectedValue"> 
                        
                        <apex:pageblockSectionItem rendered="{!dateRangeSelectionFlag}">
                            <apex:selectList size="1" value="{!eventByRange}" >
                                <apex:selectOptions value="{!EventByRangeOptions}"/>
                            </apex:selectList>
                        </apex:pageblockSectionItem>
                        
                        <apex:outputpanel rendered="{!dateSelectionFlag}">
                        <apex:actionFunction name="setStartDateValue" reRender="selectedValue">
                            <apex:param name="y" value="" assignTo="{!StartDate}" />
                        </apex:actionFunction>
                        <apex:actionFunction name="setEndDateValue" reRender="selectedValue">
                            <apex:param name="z" value="" assignTo="{!EndDate}" />
                        </apex:actionFunction>
                            From Date :
                            <input type='date' value="{!StartDate}" onchange='setStartDateValue(this.value)'/> 
                            To Date :
                            <input type='date' value="{!EndDate}" onchange='setEndDateValue(this.value)'/>

                        </apex:outputpanel>
                        
                        <apex:outputPanel rendered="{!monthSelectionFlag}">
                            From:
                                <select onchange="setStartMonthValue(this.value)">
                                    <option value="">--None--</option>
                                </select>
                            To:
                              <select onchange="setEndMonthValue(this.value)">
                                    <option value="">--None--</option>
                                  </select>
                        </apex:outputPanel>
                        
                    </apex:outputPanel>             
                </apex:pageBlockSection>        
            </apex:pageBlock>
        </apex:form>
</apex:page>


 

 

Pankaj_GanwaniPankaj_Ganwani
Hi Vishnu,

I think this would create cross browser issues for you. Please check this in all the browser to ensure it does not break down.
vishnu kalathuru 9vishnu kalathuru 9
Hi Pankaj,
Sorry for late responce...I had modified this with better option. Please below code.

                   <!-- Events By Date -->    
                    <apex:actionFunction name="afterValidation" action="{!fetchRangeRecords}" reRender="recordslistid" />
                    <apex:outputPanel rendered="{!dateSelectionFlag}">
                        <div>
                          From Date :
                          <apex:input type="date" value="{!StartDate}" id="startdateid" onchange="ValidateEndDate()" /> 
                          To Date :
                          <apex:input type="date" value="{!EndDate}" id="enddateid" onchange="ValidateEndDate();" />
                     
  </div>  
                    </apex:outputPanel>
<script>
var j$ = jQuery.noConflict();
function ValidateEndDate() {
    var startDate = j$("[id$=startdateid]").val();
    var endDate = j$("[id$=enddateid]").val();
    if (startDate != '' && endDate !='') {
        if (Date.parse(startDate) > Date.parse(endDate)) {
            alert("Start date should not be greater than end date");
            return false;
        }
        afterDateValidation();
    }
}
</script>

Thanks
Vishnu Vardhan K.