jquery google link

Question

Has anyone got any idea how this google code works?

i got the following:

<!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>
    <title>My Google AJAX Search API Application</title>
    <script src="http://www.google.com/jsapi?key=blahblahblah" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
  google.load("jquery", "1");
   google.load("jqueryui", "1");
    </script>
  </head>
  <body>
   <div class="ui-state-highlight">
    hello world
   </div>
  </body>
</html>

However the <div></div> should display the error box with hello world. but it doesn't show the red background therefor the ui is not working ...

What have i done wrong here?

score 5 · Accepted Answer · edited May 23 '17 at 12:04

5

You also need the stylesheet if you want styling, like this:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">

This is the base (grey) theme, there are others (be sure too update the version number!)

Unless you need google.load for other things, you can include the scripts directly, it's worth looking at this question for the advantages/disadvantages to using google.load().

Loading them directly would look like this:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

edited May 23 '17 at 12:04

Community

1
1

answered May 23 '10 at 14:27

Nick Craver

623,446
136
1,297
1,155

thanx that makes a hell of alot of sense :) unlike googles page... could you help me find the location for the ui? of jquery as there was only the jquery core there ... Also can i not put latest? instead of the version number or something like that i have seen it done before :) – Val May 23 '10 at 14:40
@Val -Google has a page here: http://code.google.com/apis/ajaxlibs/ for the latest, you can just put `/1/` instead of `/1.4.2/` for the latest version 1, or `/1.4/` for the latest 1.4.x release, make sense? – Nick Craver May 23 '10 at 14:44
it's not necessarily good to use the latest updated one, some of your things may break. I personally like using just 1.8.1 then I'll update when and if necessary. – Derek May 23 '10 at 15:29
@Derek - You can use `1.8`, then you'll get only bugfix releases...in any case, they leave it wide open to the developer to make the decision about upgrades, which is nice. – Nick Craver May 23 '10 at 15:39

score 0 · Answer 2 · answered May 23 '10 at 14:29

0

hello world should be displayed, but because the class ui-state-hightlight is nowhere to be found, hello world just appears as plain text.

answered May 23 '10 at 14:29

Kevin Le - Khnle

10,579
11
54
80

score 0 · Answer 3 · answered May 23 '10 at 14:55

0

It works using <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">

You may also roll your own style here

http://jqueryui.com/themeroller/

answered May 23 '10 at 14:55

user347594

1,256
7
11

jquery google link

3 Answers3