为什么我的jQuery UI CSS无法在JSFiddle中运行？

Question

For answering questions with JavaScript input i often use Demos on JSFiddle . It is very useful, but when i was answering this tooltip question i needed the usage of jQuery UI .

The problem of this usage is, that you can check the jQuery UI in the Framework selection, but it loads only the js file and not the css files.

So i decided to link to this http://jqueryui.com/themes/base/jquery.ui.all.css used in the official Demos of jQuery UI. => Problem solved.

Really solved? No?!

Because this link works great if a user has opened a jQuery Demo before, but as i did see here at my work it doesn't work if I only open the fiddle without ever having open one demo.

• Why is that?
• And how can i solve this problem?
• How should I link css in jsFiddles for jQuery? Also Googles CDN contains only the JavaScript files.

I don't want to host my own css file, just for posting demos on jsfiddle...

PS: The JSFiddle where I mentioned this behavior is http://jsfiddle.net/neysor/r9yfw/

Answer 1

Neysor, my sincere apologies - I was being an idiot.

I am indeed seeing the same problem and not getting the CSS, and I think I have found the problem.

It appears that jqueryui.com might be doing a referrer check against the request and returning a 403 to those outside of the domain (which makes sense). This is why it's working when you view the UI elements in another window, since the CSS will then be cached.

Make it work pl0x!

If you open up the "Manage Resources" tab and remove the 'jquery.ui.all' and replace with this http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css , all should work well (or at least better). Do this for any/all CSS resources.

I've forked your jsFiddle and seeing some improvements.

It may be worth checking in with the jsFiddle docs once you have a complete solution to see if we can get this documented (or better, fixed!)

Hope this helps!

Answer 2

jsfiddle documentation includes this in its "Add Resources" section :

Warning: jsFiddle is recognizing the type of the resource by the extension. If you want to use a dynamic resource please add a dummy GET variable ie http://example.com/download/js/dynamically.js?somevar=somevalue&dummy=.js . This will trick jsFiddle to recognize it as JavaScript resource.

Doesn't quite predict your problem or your workaround but worth a try (with dummy=.css ).