Object has no method datepicker

Question

I'm getting the error Uncaught TypeError: Object [object Object] has no method 'datepicker' in my javascript here:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type='text/javascript'>
$(function() {
    $("#birthday").datepicker({changeMonth: true});
});
</script>

Here's the birthday item that I'm trying to add it to:

<!--// BIRTHDAY //-->
<li class="field">
    <label for="birthday">Birthday</label>
    <div class="field"><input type="text" id="birthday" name="birthday" value="" class="" /></div>
</li>

As you can see, I'm including the source for jquery ui just above where I'm trying to use the datepicker. I got the URL from http://jqueryui.com/docs/Downloading_jQuery_UI so I'm pretty sure it's a valid URL. I also tried uploading the file and linking to the local copy and I still got the same error. What else can I try?

EDIT:

I do have the jquery library loaded using this: <script type="text/javascript" src="/includes/js/jquery-1.7.2.min.js"></script> and verified with this bit of script:

if (jQuery) {
    alert("jQuery library is loaded!");
}

Answer 1

From our discussion, we found that the $ variable (an alias to jQuery) was not behaving normally. Usually, this is because another JS plugin has changed $ to represent something else. To get around this, you can wrap your jQuery code like this:

jQuery(function($){
    //all jQuery code which uses $ needs to be inside here
});

This will change the meaning of $ within the scope of the function.

Answer 2

You may be having a jQuery conflict. Give it a try in noConflict mode like so:

<script type="text/javascript">
    (function($) {
        $(document).ready(function(){
            $("#datepicker").datepicker();
        });
    })(jQuery);
</script>