CODEWITHSUNDEEP
ajaxdatepicker
Dhawal Mhatre
Dhawal Mhatre

Reputation: 435

Datepicker in Ajax Modal Pop Up

I am using Modal Popup on click to call a FORM from Ajax, my issue is that the datepicker is not working in modal pop up + Ajax FORM

here is code

HTML :

<a href="#" data-toggle="modal" data-target="#myId" class="pickUpClass">Add</a>

<div class="modal fade" id="myId" tabindex="-1" role="dialog"   aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">      
   <form class="form-horizontal form-bordered" method="post" id="Form2">
      <div class="modal-body">
        <div class="panel-body panel-body-nopadding cancelForm" style="max-height:400px; overflow:auto;">       

        </div>            
  </form>
  </div>
</div>

AJAX CODE for calling FORM 

$('a.pickUpClass').click(function(){
    $.ajax({
        type: "POST",
        url: "AJAX.php", // 
        success: function(msg){
            $(".Form2").html(msg);
        },
        error: function(){
            //alert("failure");
        }
    });

});

AJAX.PHP

<input type="text" class="form-control" name="pickUpDate" id="pickUpDate" required>

when i call AJAX.php directly, the datepicker works perfectly and calling through ajax function datepicker is not working..

What can i do..??

Upvotes: 3

Views: 1399

Answers (1)

Ron C
Ron C

Reputation: 1206

If you want add a new bootstrap-datepicker, you must initialize the input which should be the datepicker by calling .datepicker() on it.

Change your ajax callback function to:

success: function(msg){
    $(".Form2").html(msg);

    $('#pickUpDate').datepicker({
        //options object
    });
}, ...

Upvotes: 2

Related Questions