Monday, 13 June 2016

Isues with jquery event handlers not working after re-render in salesforce.

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();" />

1 comment: