Solution: Re-initialize your jquery event handlers in the oncomplete attribute of the rerendering apex:component.
Eg: function initializeDatePickers(){
$("#dateRange1"]').datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var date2 = $('[id*="dateRange1"]').datepicker('getDate');
if(date2!=null){date2.setDate(date2.getDate()+1);}
$('[id*="dateRange2"]').datepicker( "option", "minDate", date2 );
}
});
$("#dateRange2"]').datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
//$('[id*="dateRange1"]').datepicker( "option", "maxDate", selectedDate );
}
});
}
//Do this on first page load.
$(document).ready(function(){
initializeDatePickers();
});
//Execute initializeDatePickers after oncomplete as shown below.
<apex:commandButton styleclass="" id="resetBtn" value="Reset" action="{!reset}" reRender="myForm" oncomplete="initializeDatePickers();" />
Eg: function initializeDatePickers(){
$("#dateRange1"]').datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var date2 = $('[id*="dateRange1"]').datepicker('getDate');
if(date2!=null){date2.setDate(date2.getDate()+1);}
$('[id*="dateRange2"]').datepicker( "option", "minDate", date2 );
}
});
$("#dateRange2"]').datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
//$('[id*="dateRange1"]').datepicker( "option", "maxDate", selectedDate );
}
});
}
//Do this on first page load.
$(document).ready(function(){
initializeDatePickers();
});
//Execute initializeDatePickers after oncomplete as shown below.
<apex:commandButton styleclass="" id="resetBtn" value="Reset" action="{!reset}" reRender="myForm" oncomplete="initializeDatePickers();" />
It works. Thanks a lot.
ReplyDelete