3

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?

alexdlaird
  • 1,174
  • 12
  • 34
  • could you add your full javascript code, please – FoRever_Zambia Jan 03 '12 at 19:04
  • It would be nice if you use http://jsfiddle.net for sharing your code. – Qorbani Jan 03 '12 at 19:06
  • 1
    What happens if you switch from https to http? – Bassam Mehanni Jan 03 '12 at 19:15
  • @BassamMehanni This happens for both https and http. – alexdlaird Jan 03 '12 at 19:28
  • @Qorbani Thanks for the suggestion! This has led to a solution. I first used JSFiddle with the above code, and Datepicker worked just fine (http://jsfiddle.net/Znjvh/2/). I added in another library I'm also using on the page (jQuery Tools) and the Datepicker broke (http://jsfiddle.net/Znjvh/3/). So I fiddled around with the ordering, and if you include jQuery Tools *before* you include jQuery UI, it seems to fix the problem (http://jsfiddle.net/Znjvh/5/). This, of course, begs the question: what is it in jQuery Tools that breaks jQuery UI? – alexdlaird Jan 03 '12 at 19:33
  • AFAIK, both jQuery-UI and jQuery Tools use `.tabs()`, there could be other things that overlap and fight. – mu is too short Jan 03 '12 at 19:37
  • Also, for jQuery Tools, it seems you want to use the URL http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js so you do NOT include the jQuery library again. That made the ordering issue not matter anymore (http://jsfiddle.net/Znjvh/6/). – alexdlaird Jan 03 '12 at 19:55

1 Answers1

1

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!

alexdlaird
  • 1,174
  • 12
  • 34