Jquery Datepicker Won't Work on a Ajax Added HTML Element

jquery datepicker doesn't work after ajax call if its already on page

For dynamically added datpicker

$('body').on('focus',".datepicker", function(){
    $(this).datepicker();
});​

Demo

jQuery datepicker does not work after Ajax call

Switch $(makeMyDay); to makeMyDay(); should do the trick because makeMyDay is a function and not a selector.

Or try to bind the datepicker() directly after the ajax-call as far as .datepicker is in the .bar container this should work:

function getNewPage(id,idTwo)
{
    $.ajax({
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) {
             $('.bar' + idTwo).html(data).find(".datepicker").datepicker({
                   inline: true
              });
        }
    });
}

A working example that simulates the process can be found here: http://jsfiddle.net/7wBWB

JQuery datepicker not working after ajax call

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

Jquery datepicker doesnt work on appended element

Like @adeneo said:

Put:

$('.date-picker1').datepicker({ dateFormat: 'yy-mm-dd' }).val();

After

tbody.appendChild(row);

JQuery UI - Can't get datepicker to work

include jquery before jquery ui.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

working code

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
   $( "#date" ).datepicker();
 });
</script>

Date:

Getting jQuery datepicker live, when html is loaded from ajax

One option is to use on method in deprecated live way and click event to initialize Datepicker:

$('body').on('click', 'input.datepicker', function(event) {
    $(this).datepicker({
        showOn: 'focus',
        yearRange: '1900:+0',
        changeMonth: true,
        changeYear: true
    }).focus();
});

This code should be placed in $(document).ready section.

Pay attention to showOn: 'focus' option and triggering focus event after initialization.

DEMO: http://jsfiddle.net/Mq93s/

---

Related Topics