-2

I have a verry complex datepicker in a div that reload's with AJAX after a submit, but after the submit (and AJAX reload of the page) the datepicker is not working anymore.

Datepicker code:

        dates[x] = $( "#from_"+x+", #to_"+x ).datepicker({ 
        dateFormat: "dd-mm-yy",
        numberOfMonths: 3,
        showWeek: true,
        maxDate: max_date_ini,
        minDate: min_date_ini, 
        beforeShow:function legen_array() {
            var from_of_to = this.id.indexOf("from_") != -1 ? "from" : "to";
            //eerst een check of er niet nog een datepicker periode half gevuld is (want dan is overlap mogelijk)
            if (periode_half_gevuld != x && periode_half_gevuld != 0){
                alert('Er is nog een periode niet geheel ingevuld, er is alleen een vanaf of alleen een tot datum ingevuld. Maak deze periode eerst compleet of maak hem leeg door op verwijderen te klikken');
                return false;           
            }
            var date_from_open = $("#from_"+x).val();
            var date_to_open = $("#to_"+x).val();
            var timestamp_from_open = Date.UTC(date_from_open.substring(6,10),date_from_open.substring(3,5)-1,date_from_open.substring(0,2))/1000;
            var timestamp_from_open_teller = Date.UTC(date_from_open.substring(6,10),date_from_open.substring(3,5)-1,date_from_open.substring(0,2))/1000;
            var timestamp_to_open = Date.UTC(date_to_open.substring(6,10),date_to_open.substring(3,5)-1,date_to_open.substring(0,2))/1000;
            //als from en to gevuld zijn dan eerst deze waardes uit array halen (Anders kan 1 dag verder of terug niet gekozen worden)
            if (timestamp_from_open > 0 && timestamp_to_open > 0){
                geselecteerde_vanaf_datums.splice( $.inArray(timestamp_from_open,geselecteerde_vanaf_datums), 1 );
                geselecteerde_tot_datums.splice( $.inArray(timestamp_to_open,geselecteerde_tot_datums), 1 );
                while (timestamp_from_open_teller <= (timestamp_to_open+1)){
                    datums_niet_beschikbaar.splice( $.inArray(timestamp_from_open_teller,datums_niet_beschikbaar), 1 );
                    timestamp_from_open_teller = timestamp_from_open_teller + 86400;                    
                }
                if (this.id.indexOf("from_") == 0 && $("#to_"+x).val() != '' && geselecteerde_tot_datums.length >= 1){
                    var min_datum = new Date (getNextMinVal(geselecteerde_tot_datums, timestamp_to_open)*1000);
                    $('#from_'+x).datepicker('option', {minDate: min_datum,maxDate: $("#to_"+x).val()});
                }
                else if (this.id.indexOf("from_") == 0 && $("#to_"+x).val() != '' && geselecteerde_tot_datums.length == 0){
                    $('#from_'+x).datepicker('option', {minDate: new Date(volgend_jaar, 1 - 1,1),maxDate: $("#to_"+x).val()});
                }
                else if (this.id.indexOf("from_") == -1 && $("#from_"+x).val() != '' && geselecteerde_vanaf_datums.length >= 1){
                    var max_datum = new Date (getNextMaxVal(geselecteerde_vanaf_datums, timestamp_from_open)*1000);
                    $('#'+this.id).datepicker('option', {minDate:$("#from_"+x).val(),maxDate: max_datum});
                }
                else if (this.id.indexOf("from_") == -1 && $("#from_"+x).val() != '' && geselecteerde_vanaf_datums.length == 0){
                    $('#to_'+x).datepicker('option', {minDate: $("#from_"+x).val(),maxDate: new Date(volgend_jaar, 12,0)});
                }
                else {alert('10');}
            }
            else if(timestamp_from_open > 0 && timestamp_to_open < 0 && from_of_to == 'to' && geselecteerde_vanaf_datums.length >= 1){
                var closest_max = getNextMaxVal(geselecteerde_vanaf_datums, timestamp_from_open);
                $("#"+this.id).datepicker('option', {maxDate: new Date(closest_max*1000)});
                $("#"+this.id).datepicker('option', {minDate: new Date(timestamp_from_open*1000)});
            }
            else if(timestamp_from_open < 0 && timestamp_to_open > 0 && from_of_to == 'from'){
                var closest_min = getNextMinVal(geselecteerde_tot_datums, timestamp_to_open);
                $("#"+this.id).datepicker('option', {minDate: new Date(closest_min*1000)});
                $("#"+this.id).datepicker('option', {maxDate: new Date(timestamp_to_open*1000)});
            }
        },
        beforeShowDay: unavailable,
        onSelect: function(selectedDate) {
                var option = this.id.indexOf("from_") != -1 ? "minDate" : "maxDate"; 
                dates[x].not(this).datepicker("option", option, selectedDate); 
        },
        onClose: function (geselecteerdedatums) {
            var from_of_to = this.id.indexOf("from_") != -1 ? "from" : "to"; 
            var date_from = $("#from_"+x).val();
            var date_to = $("#to_"+x).val();
            var timestamp_from = Date.UTC(date_from.substring(6,10),date_from.substring(3,5)-1,date_from.substring(0,2))/1000;
            var timestamp_to = Date.UTC(date_to.substring(6,10),date_to.substring(3,5)-1,date_to.substring(0,2))/1000;
            var aantal_dagen = (timestamp_to - timestamp_from)/86400;
            if (timestamp_from > 0 && timestamp_to > 0){
                    geselecteerde_vanaf_datums.push(timestamp_from);
                    geselecteerde_vanaf_datums.sort();
                    geselecteerde_tot_datums.push(timestamp_to);
                    geselecteerde_tot_datums.sort();
                    geselecteerde_tot_datums.reverse();
                while (timestamp_from <= timestamp_to){
                    datums_niet_beschikbaar.push(timestamp_from);
                    timestamp_from = timestamp_from + 86400;
                }
                periode_half_gevuld = 0;
                $("#half_gevulde_datepicker").val(0);
                $("#datums_bezet").val(datums_niet_beschikbaar);
                $("#datums_vanaf").val(geselecteerde_vanaf_datums);
                $("#datums_tot").val(geselecteerde_tot_datums);
            }
            else if (this.value != ''){
                periode_half_gevuld = x;
                $("#half_gevulde_datepicker").val(x);
            }
        }
    }); 
}); 
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Jilco Tigchelaar
  • 2,065
  • 8
  • 31
  • 51
  • How is the AJAX reload being accomplished? Are we talking .NET update panels? I've had problems with those in the past as well because it loses the context of the page and the javascript files. I would also agree with algorhythm, you may have to reinitialize the datepicker. – Icestorm0141 Dec 17 '12 at 15:18
  • @icestorm See http://stackoverflow.com/questions/13911784/javascript-included-files-are-gone-after-ajax-reload r – Jilco Tigchelaar Dec 17 '12 at 15:43

1 Answers1

1

I think you have to initialize the datepicker again after AJAX reload.

jQuery('.datepicker').datepicker({...});
algorhythm
  • 8,530
  • 3
  • 35
  • 47