JQuery datepicker not working after ajax call

Question

I have the following code

<html>
    <head>
       //included all jquery related stuff ..not shown here
    </head>
    <body>
       <button id = 'btn' />
       <div id = 'ct'>
             <?php echo file_get_contents('my_ajax_stuff.php'); ?>
       </div>
    </body>
    <script>
       $('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
       $('#btn').click(function() {
           $.ajax({
            type: "GET",
            url: "my_ajax_stuff.php" ,
            success: function(response) {
                $('#ct').html(response);
                /*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");
            }
        });
       });
    </script>
</html>

The page

my_ajax_stuff.php

contains a jquery ui datepicker with class = 'datepicker'.On the first load the datepicker works.But when I click on the button to reload it again , the contents are replaced with new contents.But the datepicker is not working.I have tried initialising the datepicker inside the ajax success handler ,as you see.But it also failed.What is the issue.How can it be solved???

I have tried that,which is commented in ajax success handler here..But no difference — Jinu Joseph Daniel
– Jinu Joseph Daniel, Commented Dec 8, 2013 at 13:25
And what give you in success callback: $( ".datepicker" ).length ? Any error in console? BTW, you could use a workaround by reinitialize datepicker when needed (not already done) on mouseenter for example. Mouseenter should be delegated — A. Wolff
– A. Wolff, Commented Dec 8, 2013 at 13:26
please, provide the HTML code of .datepicker element as it is in response — A. Wolff
– A. Wolff, Commented Dec 8, 2013 at 13:30

Beakie · Accepted Answer · 2015-10-02 11:54:06Z

19

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");
        }
    });
});

edited Oct 2, 2015 at 11:54

Beakie

2,0093 gold badges26 silver badges49 bronze badges

answered Dec 8, 2013 at 13:30

Moeed Farooqui

3,6281 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jinu Joseph Daniel Over a year ago

I've already tried that with $( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"}); But not worked

charlietfl Over a year ago

@JinuJosephDaniel works fine here....jsfiddle.net/9rVK4 something else is wrong in your code

Jinu Joseph Daniel Over a year ago

@charlietfl :That's not the case.I have a datepicker already in the page..and another one is overwriting it..In your case you have no datepicker..and the datepicker is loaded by ajax

charlietfl Over a year ago

@JinuJosephDaniel here's your scenario working finne also jsfiddle.net/9rVK4/3

Community · Accepted Answer · 2017-05-23 12:01:29Z

6

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");
    });
});

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Dec 8, 2013 at 13:31

Gotschi

3,1942 gold badges26 silver badges23 bronze badges

4 Comments

A. Wolff Over a year ago

i'd filter it just in case: $("body").on("click", ".datepicker:not(.hasDatepicker)", function(){...});

A. Wolff Over a year ago

@JinuJosephDaniel could you just provide HTML markup of .datepicker element as it is in response and as i asked you 10 mins ago???

A. Wolff Over a year ago

@JinuJosephDaniel i don't know, it should work as you have already tried

Djomla Over a year ago

Check if you have 'hasDatepicker' class! That was problem for me.

Waleed Abdalmajeed · Accepted Answer · 2017-11-16 07:55:38Z

1

Call your picker inside .ajaxComplete function.

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

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

Here is a link

edited Nov 16, 2017 at 7:55

answered Nov 16, 2017 at 7:45

Waleed Abdalmajeed

8346 silver badges13 bronze badges

Comments

bizco · Accepted Answer · 2015-03-11 13:55:25Z

0

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...

answered Mar 11, 2015 at 13:55

bizco

638 bronze badges

Comments

CodePrime8 · Accepted Answer · 2019-07-01 21:04:08Z

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.

Collectives™ on Stack Overflow

JQuery datepicker not working after ajax call

5 Answers 5

4 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related