jquery change function works on one page but not another

Question

I'm having a little bit of trouble with an on click function on one of the projects I'm working on. If you notice on the home page when you populate checkin and checkout dates and then switch the property, the values in both inputs are cleared.

// clear datepickers on property change
$('#DropDownListProperty').change(function () {
    $('#TextBoxCheckIn').val('');
    $('#TextBoxCheckOut').val('');
});  

(line 276 on the page's script if you're in firebug)

I need this same functionality on the Pricings page but for some reason the change event never fires. As far as I can tell I've implemented the code in the exact same way with the addition of a couple more lines:

// clear datepickers and pricing on property change
$('#DropDownListProperty').change(function () {
    $('#TextBoxCheckIn').val('');
    $('#TextBoxCheckOut').val('');
    $('#pricing').hide();
    $('#personal-info').hide();
}); 

but the code here never fires. (line 172 of the page's script in firebug). I swear I've checked the IDs a million times but it stumps me what is preventing the fields from being cleared.

Any help is appreciated!

Answer 1

Related to the error I commented on earlier, try commenting out lines 166 to 170 in your code and your change event should fire without error.

This is your problem code that you should comment out:

var endDate = new Date($('#TextBoxCheckIn').datepicker('getDate').getTime() + msecsInADay);

if (endDate != null) {
   $('#TextBoxCheckOut').datepicker("option", "minDate", endDate);
}

Answer 2

You got an error on line 166 :

var endDate = new Date($('#TextBoxCheckIn').datepicker('getDate').getTime() + msecsInADay);

returns : Uncaught TypeError: Cannot call method 'getTime' of null

You tried to getTime of getDate which is blank. Put these lines into

 $('#TextBoxCheckIn').datepicker({

And that should works