You need to include jQuery before you include jQuery UI, as jQuery UI
depends on jQuery. So change
<script type="text/javascript"
src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
to
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.7.2.custom.min.js"></script>
If you haven't already, I recommend installing Firebug. This would've shown
as an error in the Firebug Console. Something like
jQuery is not defined
jquery-ui-1.7.2.custom.min.js()jquery-ui-1.7.2.custom.min.js (line 10)
jQuery.ui||(function(c){var i=c.fn.remov...ate;delete
this._unrotate}}})})(jQuery);jquery-ui-1.7.2.custom.min.js (line 10)
Also, you need a document.ready function for any jQuery code in the head to
find any elements in the body. You may want to start with a jQuery (as
opposed to jQuery UI) tutorial, such as:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Next, do you really want an inline datepicker in a div? Because the
onclick="..." on your input suggests you want the datepicker to appear when
the input is clicked. This is the default behavior if you call .datepicker
on the input instead of on a div. See
http://jqueryui.com/demos/datepicker/default.html
for a full code sample you can use as a starting point. Notice in view
source on that page the .datepicker() call is inside a
$(function() {
...
});
That's a shorthand syntax for document.ready
$(document).ready(function() {
...
});
I got to that demo by going do jqueryui.com/demos/datepicker and then
clicking 'new window', which you can do for any of the demos.
- Richard
On Sat, Oct 31, 2009 at 4:13 AM, northernLights <chq...@yahoo.com> wrote:
> Hi all,
>
> I'm new to javascript libraries in general. I am trying to use the
> use the UI widgets, but I'm not getting the results demonstrated in
> the Getting Started guide at http://jqueryui.com/docs/Getting_Started.
> Here is my code:
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>Widget testing</title>
> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"
> ></script>
> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
> <link type="text/css" href="css/smoothness/jquery-
> ui-1.7.2.custom.css"rel="Stylesheet" />
>
> <script language="javascript" type="text/javascript" >
>
> // Datepicker
> $('#datepicker').datepicker({
> inline: true
> });
> </script>
>
> </head>
>
> <body>
>
>
> <!-- Datepicker -->
> <h2 class="demoHeaders">Datepicker</h2>
> <div id="datepicker">date:
> <input type="text" name="date" id="date" onclick=".datepicker
> ('#datepicker');" />
> </div>
>
>
> </body>
> </html>
>
>
> I know the code must be wrong and I must be missing some steps. The
> example doesn't tell you exactly what to do, it just gives you some
> code and but doesn't tell you where to put it. I understand HTML and
> CSS alright, and I understand Javascript, too, even though I'm still
> learning.
>
> So, could someone tell me what I'm doing wrong and how I can get the
> widgets to work?
>
> Thanks!
>
>
>
> --
>
> You received this message because you are subscribed to the Google Groups
> "jQuery UI" group.
> To post to this group, send email to jquery...@googlegroups.com.
> To unsubscribe from this group, send email to
> jquery-ui+unsubscr...@googlegroups.com<jquery-ui%2bunsubscr...@googlegroups.com>
> .
> For more options, visit this group at
> http://groups.google.com/group/jquery-ui?hl=en.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
