views:

3536

answers:

4

I'm new to jQueryUI and I think I am overlooking something very basic...

Quick description of my problem

I used ThemeRoller to download a jQueryUI theme, which also generates a jQueryUI javascript file. I'd rather use the file hosted at Google (http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js), but when I do this the theme is not picked up. I find it hard to believe that I must use the ThemeRoller-generated script, because if this were the case then the Google-hosted jQueryUI would be completely useless! What am I doing wrong here??


More details

So I downloaded the "Smoothness" theme from Themeroller as follows:

  1. Go to ThemeRoller site.
  2. Click "Gallery" button.
  3. Click "Download" button beneath "Smoothness" theme.
  4. Extract the .zip file (using folder names) to a local directory (say, C:\jqueryui_test).

Now, I created a very simple test.html file in that same directory, which has the following content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<link type="text/css" href="ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function() {
  $("#datepicker").datepicker({inline: true});
});
</script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>

When I open test.html in my browser, the date picker component is not styled (no background images or anything). But if I change the Google-hosted jquery-ui.min.js line to the one that ThemeRoller generated (<script type="text/javascript" src="jquery.ui.all.js"></script>), the page is styled as expected.


Update The answer I accepted wasn't really the final solution, but it lead me down the right path. Turns out if you just download JQueryUI, you get lots of stuff. The Google-hosted file can just replace the "jquery.ui.all.js" file, but you still need the "themes" directory. Plus, the Themeroller themes don't work very well with 1.5.3 (even the "1.5.3 users" link). Since this was only for an admin page, I just used the "flora" theme that was built in. Looks like jQuery UI 1.6 is much better but it's not in "stable" release yet (as of this writing...).

A: 

I had a similar problem the other day when I lost my wireless signal for a moment. Are you sure you had access to Google?

Birk
Yeah I'm on my PC at work which is hard-wired. I know it must be picking it up, because it still draws the calendar control, but there is no styling on it at all.
Kip
+3  A: 

Replicated your setup here.. Themeroller supplied you with jQuery UI 1.6rc5, whereas the Google version you're refering seems to be a different version (1.5.3?).. Could this be the source of your problem?

Tim
Hmm... 1.5.3 is the latest "stable" release, is ThemeRoller just not compatible with those?
Kip
there is a link at the bottom left-hand column to download 1.5.3 compatible theme
Bruce Aldridge
Well this was only part of the problem but it started me down a different path so I'm accepting it as the answer..
Kip
Sorry for not following up.. From what I read 1.6 should be out soon though, right?
Tim
A: 

I have confirmed this is a bug or something. You must use the version of jquery ui from the theme rolled folder, NOT the google AJAX api version. Hopefully this will be resolved when google hosts the new jquery ui file.

+1  A: 

Matchu found an undocumented theme directory and posted it to my stackoverflow question.

cf_PhillipSenn