Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Problem getting themes to work in jQueryUI using Google-hosted jquery-ui.js

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<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...).

like image 483
Kip Avatar asked Jan 26 '09 21:01

Kip


People also ask

What happened to jQuery UI?

jQuery maintainers are continuing to modernize its overall project that still is one of the most widely deployed JavaScript libraries today. The team announced that the cross-platform jQuery Mobile project under its umbrella will be fully deprecated as of October 7, 2021.

What is jQuery ui themes?

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

What is Google CDN jQuery?

jQuery is a JavaScript library primarily designed with the purpose to make it easier to use JavaScript on our website. jQuery wraps many lines of JavaScript code into methods that we can call with a single line of code. Google provides CDN support for jQuery via the googleapis.com domain.

Does Google use jQuery?

No, Google certainly does not use jQuery—it is all vanilla JavaScript and (sometimes) Closure Library. As for inlining, if JS/CSS is relatively small, it is faster to inline it to minimize the number of HTTP requests. Google Page Speed Online can give you some tips on how to optimize your page.


1 Answers

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?

like image 162
Tim Avatar answered Oct 11 '22 20:10

Tim