Question

load.js:

jQuery(document).ready(function($) {
    $('.dialog ul li').click(function(e) {
        switch($(this).attr('id')) {
        case 'addProject':
            $('.addDialog').load('/add/addprojectform');
            break;
        case 'addTask':
            $('.addDialog').load('/add/addtaskform');
            $('#dueDate').datePicker();
            break;
        }
    });
});  

And this is in the header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script src="js/utils.js"></script>
<script src="js/load.js"></script>  

The error I get is:

Uncaught TypeError: Object [object Object] has no method 'datePicker' load.js:10
(anonymous function) load.js:10
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3  

I tried a few ways to fix it but still the error is there. What is it that causes the error? Thank you

Answer 1

Since load performs an asynchronous ajax call and the element #duedate is inside the resource you have to wait the end of the call before using a method applied to that element

Since any ajax method on jQuery returns a Deferred Object you can continue the code execution inside done() callback

$('.addDialog').load('/add/addtaskform').done(function() {
    $('#dueDate').datePicker();
});

or using a simple success callback

$('.addDialog').load('/add/addtaskform', function() {
    $('#dueDate').datePicker();
});