jQuery UI not loading

Question

My test div is below. If I put all of this into its own page, everything works perfectly. If it put it onto my final page, I get an error saying that datepicker() is undefined.

How do I figure out what is causing jQuery UI to break?

<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />

<script type='text/javascript'>
$(document).ready(function() {

    //for calendar
    $("#date_to").datepicker();
    $("#date_from").datepicker();
    //end for calendar
})
</script>

<input id='date_to'>
<input id='date_from'>
</div>

Answer 1

Make sure you didn't accidentally reference jQuery twice. I had an older version of jQuery loading after jQuery UI, which was jacking things up. =/