CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapdatepicker
Tobias
Tobias

Reputation: 964

bootstrap-datepicker undefined in AJAX loaded content

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?

Upvotes: 0

Views: 632

Answers (1)

Lunster
Lunster

Reputation: 906

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

Upvotes: 1

Related Questions