You need to sign in to do that
Don't have an account?
vishnu 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
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
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>
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>
I think this would create cross browser issues for you. Please check this in all the browser to ensure it does not break down.
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.