Geek Answers Handbook

The object does not have a datepicker method

I get an 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 element I'm trying to add:

 <!--// 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 am including the jquery ui source just above where I am trying to use datepicker. I got the url from http://jqueryui.com/docs/Downloading_jQuery_UI , so I'm sure this is a valid url. I also tried downloading the file and linking it to a local copy, and I still have the same error. What else can I try?

EDIT:

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

 if (jQuery) { alert("jQuery library is loaded!"); }
+8
jquery jquery-ui datepicker
source share
4 answers

From our discussion, we found that the $ variable ( jQuery alias) is not behaving normally. This is usually due to the fact that another JS plugin 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 value of $ within the scope of the function.

+23
source share

You may have a jQuery conflict. Try in noConflict mode as follows:

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

$ will work like

 $(function($) { $( "#dateTasted" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd" }); });
+1
source share
 <script type="text/javascript"> (function($){ var pickerOpts = { // minDate: new Date(), //maxDate: "+3m,", showButtonPanel: true, showOn: "button", buttonImage: "images/cal.png", }; $("#birthday").datepicker(pickerOpts); })(jQuery); </script>

reference to the original solution

0
source share

More articles:


All Articles