Friday, April 2, 2010

Wasted an hour to fix "$(".datepicker").datepicker is not a function"

I have been using datepicker in the jQuery UI package for quite a while and it was always nice and easy, until this morning when I was trying to add it to a page, it keep giving me the error "$(".datepicker").datepicker is not a function". I check from firbugs that, the jquery-ui-1.7.2.min.js is included, so as the jquery-1.3.2.min.js. I was copying the code from another page I wrote, where the datepicker works just well. I was haunting around that several lines of code, trying to use other version of jQuery and jQuery UI, but found nothing, until I roll down to the page and saw that there is another script reference of jquery-1.3.2.min.js, which I added 2 days ago for other purpose. As soon as I remove that second include, the datapicker come back to life.

The lesson is clear, yet is not frequently mentioned and would be a headless blocker for javascript newbies like me. Include the jQuery core library again will overwrite the functions added by the jQuery UI, thus the functions are missed in the final js object.

It is not a good practice to include these kind of library in the middle of a page. But it may still happen some where by some reasons. If you get weird javascript function not found error, try to look for these duplicated library include.

7 comments:

il Santi said...

You saved me half an hour! Duplicated references are crashing on several jquery functions. Thanks a lot!

Rene Sandoval said...

Amazing! Simple solution... thanks!

anand sonake said...

Thanks man for saving my time :)

Asanka Umesh said...

awesome man, ur a life saver

miguel posada said...

you just save me alot of time and effort i was looking for an answer for like 2 hours already! THANKS A LOT

Design Gatitaa said...

THANKS A LOT

Raj said...

Thank you so mutch.....Raj(India)