Geek Answers Handbook

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>

Page

my_ajax_stuff.php

contains jquery ui datepicker with class = 'datepicker'. Datepicker runs on the first boot. But when I click the button to reload it again, the content is replaced with the new content. But datepicker is not working. I tried to initialize the datepicker inside the ajax success handler, as you can see. But that also failed. What a problem. How can this be solved?

+4
source share
5 answers

You need to reinitializechoose a date in the success of Ajax

$('.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");
        }
    });
});
+15
source

, , : jQuery datepicker html AJAX

datepicker DOM ajax. , , , PHP my_ajax_stuff.php HTML, jQuery DOM.

// do this once the DOM 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");
    });
});
+4

, , OP.

Mooed Farooqui reinitialize Ajax , .

, datepicker my_ajax_stuff.php. , , . , -, ...

0

.ajaxComplete.

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

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

0

, , MakeDatePicker, OnChange, , ajax , AJAX. . ( , ColdFusion #, Coldfusion CFOutput.)

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

:

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

, , .

, . , , 1 , , . , SQL . .datepicker. , , , . .class , DOM.

0

More articles:


All Articles