Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery datepicker not working after ajax call

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

like image 474
Jinu Joseph Daniel Avatar asked Dec 08 '13 13:12

Jinu Joseph Daniel


2 Answers

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");
        }
    });
});
like image 127
Moeed Farooqui Avatar answered Nov 19 '22 15:11

Moeed Farooqui


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");
    });
});
like image 34
Gotschi Avatar answered Nov 19 '22 14:11

Gotschi