bootstrap-datepicker在AJAX加载的内容中未定义

Question

I am using bootstrap-datepicker from this repo: https://github.com/eternicode/bootstrap-datepicker homepage: http://eternicode.github.io/bootstrap-datepicker

It works just fine on a form with datefields. However, on that form I also have a button which opens a subform in a modal and that subform also has datefields. The problem is that on that subform, the datepicker is undefined and hence does not work.

In the modal form page loaded using AJAX, I have this snippet:

<script type="text/javascript">
$(document).ajaxComplete(function()
{
    var thing = $('.date-container input');
    console.log(thing);        //prints as a valid element
    console.log($.datepicker); //prints as 'undefined'
    thing.datepicker({         //crashes the script due to .datepicker being undefined
        autoclose: true,
        todayHighlight: true
    });
});
</script>

I even tried running this code from the documentation to set a format in the modal script but that snipped also caused an error saying that datepicker is undefined:

$.fn.datepicker.defaults.format = "mm/dd/yyyy";

So it seems like for some reason, in the script contained in the modal loaded through AJAX, datepicker is simply undefined, but in the parent page on which the modal is loaded, the datepicker works fine.

Any ideas on what the problem might be?

Answer 1

Are you loading jQuery again in the modal page? I suspect this may be the culprit.