JQuery datepicker not working after ajax call

Question

I have the following code

    
       //included all jquery related stuff ..not shown here
    
    
               


        

Answer 1

You need to reinitialize the date picker in Ajax success

$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});

$('#btn').click(function() {
    $.ajax({
        type: "GET",
        url: "my_ajax_stuff.php" ,
        success: function(response) {

            $('#ct').html(response);
            $( "#datepicker" ).datepicker();
            /*added following line to solve this issue ..but not worked*/
            //$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});

        } ,
        error: function () {
            $('#ct').html("Some problem fetching data.Please try again");
        }
    });
});

Answer 2

Call your picker inside .ajaxComplete function.

$(document).ready(function () {
    // setup picker here...
});

$(document).ajaxComplete(function() {
   // setup picker here...
});

Here is a link

Answer 3

The answer you are looking for may be similar to this question: jQuery datepicker won't work on a AJAX added html element

You're replacing the datepicker element in the DOM with the ajax response. The reason this works for the first time is that PHP renders the my_ajax_stuff.php on first load already in the HTML so it becomes available to jQuery in the DOM.

// do this once the DOM's available...
$(function(){

// this line will add an event handler to the selected inputs, both
// current and future, whenever they are clicked...
// this is delegation at work, and you can use any containing element
// you like - I just used the "body" tag for convenience...
    $("body").on("click", ".datepicker", function(){
            $(this).datepicker();
            $(this).datepicker("show");
    });
});

Answer 4

This may be a primitive solution, but I found that If I have in my main document a function MakeDatePicker and I used it in the OnChange portion of my input, I was able to make any object, ajax, or otherwise, turn into a date picker before, and after an ajax call. Here is the function and the call. (please note, I have ColdFusion # functions, as this is a return on a coldfusion query with a CFOutput.)

<td><input type="date" class="EstDeliveryDatePicker" chassis="#chassis#" value= "#DateFormat(EstDelivery,'mm/dd/yy')#" onclick="MakeDatePicker(this);"></input></td>

here is the function at the top of my page:

function MakeDatePicker(obj) { $(obj).datepicker({ changeMonth: true, changeYear: true }); $(obj).datepicker("show"); }

like I said, its crude, but it works.

I was having an issue with the way my tables would display their sorts. I have it so when you enter the page, you have 1 field that you can click on to select a date. If you click on one of the headers, it would sort SQL command, and re-display the table. This would break the .datepicker function. So I change it to not read off the class, but make the click, trigger the function. the problem with trying to get it to run on the .class was it would initialize after the table was redrawn and lose the scope of the DOM.

Answer 5

I came across this question because I was having the same problem as OP.

Mooed Farooqui's recommendation to reinitialize in Ajax success worked, but not initially.

Ended up that I was also calling the datepicker function in my equivalent of my_ajax_stuff.php. After I took that out it worked perfectly on button reload and postbacks. Hope this helps someone that stumbles upon this old question...