Search code examples
jqueryjquery-uijquery-ui-datepickergoogle-cdn

jQuery UI $.datepicker () Does Not Exist for Google Code CDN (Works Locally)


When I link to the jQuery UI file stored on Google's servers with the following code in my :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

... and in my scripts $(document).ready () I do the following ...

$("#date-processed").datepicker ({ dateFormat: 'M. dd, yy' });

The script will break for all browsers on this page. The reason being it says "datepicker" does not exist as a function. So, if I go to http://jqueryui.com/download and download the custom jQuery UI library with UI Core and Datepicker and link that file in my instead, it works just fine.

So, to experiment, I downloaded the custom jQuery UI library from http://jqueryui.com/download with everything checked, then I Google's CDN copy of jQuery UI, and there's a 7kb difference in the file sizes.

In most of the Datepicker tutorials and examples I've seen, people are using Google's CDN copy just fine, so I assume this must be something I'm doing incorrectly, not an inconsistency on Google's part. I have verified my local version number and Google's CDN version number of jQuery UI are the same. Anyone familiar enough with Google's CDN and jQuery UI to shed some light on this situation?


Solution

  • Qorbani requested I use JSFiddle to post the source code, so I played around with that and found that it worked when I used JSFiddle (http://jsfiddle.net/Znjvh/3/). I then realized the issue was that on the page I was also using jQuery Tools and including it after jQuery UI. When I moved it above jQuery UI, everything worked fine (http://jsfiddle.net/Znjvh/5/).

    I went to hunt down the conflict between jQuery UI and jQuery Tools and found that the standard URL for jQuery Tools that I was using, http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js, also includes jQuery. That's likely where the conflict was (though there could have been more. As "mu is too short" pointed out, both jQuery Tools and jQuery UI use .tabs(), for instance).

    Anyway, for other users that stumble upon this question, if you are using jQuery Tools and jQuery UI together, make sure you are including the jQuery Tools that does not also include jQuery. I fixed it by changing the URL to http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js (http://jsfiddle.net/Znjvh/6/).

    Thanks for your help, guys!