datepicker undefined in modal form loaded through AJAX

[Tobias Widlund]

I am using the bootstrap-datepicker in a project using django and bootstrap and jquery. I have a problem when using the datepicker in a modal form loaded through AJAX.

I have one page which loads bootstrap-datepicker and uses it on a few fields in a form. This works fine as expected. However on that form I have a button which opens a bootstrap modal window containing a sub form. It is implemented by issuing an AJAX request which fetches a page only containing a <div> with the sub form, and a snipped of script to load the datepicker, because the subform also has date fields. 

The problem is that everything related to the datepicker seems to be undefined in the AJAX requested subform.

This is the snippet of code I have in my AJAX fetched form page:

<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 at "cannot run undefined function"

      autoclose: true,

      todayHighlight: true

    });

});
</script>

I even tried to run this function to see if it worked:

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

But $.fn.datepicker is also undefined...

Any ideas on how the datepicker can be undefined in a subform fetched through AJAX which is inserted in an already existing page where the datepicker works?

[Tobias Widlund]

Never mind, I solved it.

The problem was that a different javascript application redefined jquery to a jquery shipped with  django, causing a conflict.