Bootstrap datepicker not working with AJAX load()

Question

I have an AJAX loaded page - users.php . Every time I click on the users tab, the following function is called:

function users(){
    var id = document.getElementById("usersstab");
    $("#users").load("load.php");
    $("#users").load("users.php");
}

In users.php, I have a form that is hidden. The form is displayed only on the click of "Add user" button. In that form, I have a birth date field, for which I want to use the datepicker() .

<input id="dobofsubuser" type="text" name="subuserdob" class="form-control" />

I call this function at the footer of the main (parent page) :

$('#dobofsubuser').datepicker({
    format: "yyyy-mm-dd",
    endDate: "Current Date",
    startView: 2
});

This doesn't show the calendar and I have tried to look for answers but none of the previously mentioned solutions have helped this far. Can someone please tell me what I am doing wrong or what needs to be done so that the datepicker works on load() ? Thanks in advance!

This is the order of my scripts:

        <script src="js/modernizr-2.6.2.min.js"></script>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script> 
        <script src="js/validetta.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/jquery.mask.min.js"></script>
        <script src="js/sweet-alert.min.js"></script>
        <script src="js/bootstrap-datepicker.min.js"></script>
        <script type="text/javascript" src="http://js.stripe.com/v2/"></script>

If there is no solution here, can someone please suggest an alternative calendar plugin that would work well with ajax loaded pages?

Answer 1

Try to init your datepicker after load :

$("#users").load("users.php", function() {
    $('#dobofsubuser').datepicker({
        format: "yyyy-mm-dd",
        endDate: "Current Date",
        startView: 2
    });
});

Hope this helps.

Answer 2

Possibly there is some js library that is interfering with your code.

Try this for bootstrap datepicker

$(document).ready(function () {
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;  
    $("#datepicker").bootstrapDP({  format: 'yyyy-mm-dd'});  
});