Hi, I'm quite new to jQuery and jQuery UI development (and even JavaScript for that matter) and I've been trying out the examples from this tutorial:
* http://youngisrael-stl.org/wordpress/understanding-jquery-ui-widgets-a-tutorial/ * and midway through the tutorial, I came across this error while trying out the examples: TypeError: $.widget is not a function at [Top-level script]() (TestJQueryProject/scripts/testwidget2.js:67) Here's the source code: *example-jquery-ui-widget.html:* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd";> <html dir="ltr" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Example: jQuery UI Widget</title> <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script> <script type="text/javascript" src="../scripts/testwidget2.js"></script> </head> <body> <p class="target">This is a paragraph called with .green4({ level:3, greenlevels: ['#000', '#00f', '#088', '#0f0', '#880', '#f00', '#808', '#fff'] }). </p> <input type="button" id="toggle" name="on" value="Turn green" /> <input type="button" id="darker" name="darker" value="Darker" /> <input type="button" id="lighter" name="lighter" value="Lighter" /> </body> </html> and *testwidget2.js:* $(function() { var STR_DARKER = "darker"; var STR_LIGHTER = "lighter"; var STR_OFF = "off"; var BTN_LABEL_TURNGREEN = "Turn green"; var BTN_LABEL_TURNOFF = "Turn off"; $("#toggle").click(function() { if ($(this).val() == BTN_LABEL_TURNGREEN) { $(".target").green3(); $(this).val(BTN_LABEL_TURNOFF); } else { // ($(this).val() == BTN_LABEL_TURNOFF; $(".target").green3(STR_OFF); $(this).val(BTN_LABEL_TURNGREEN); } }); $("#darker").click(function() { $(".target").green3(STR_DARKER); }); $("#lighter").click(function() { $(".target").green3(STR_LIGHTER); }); }); var Green3 = { _init: function() { this.setLevel(15); }, greenlevels: ["#000", "#010", "#020", "#030", "#040", "#050", "#060", "070", "#080", "#090", "#0a0", "#0b0", "#0c0", "#0d0", "#0e0", "#0f0", "#fff"], level: 0, getLevel: function() { return this.level; }, setLevel: function(x) { this.level = Math.floor(Math.min(this.greenlevels.length - 1, Math.max(0, x))); this.element.css({ background: this.greenlevels[this.level] }); }, darker: function() { this.setLevel(this.getLevel() - 1); }, lighter: function() { this.setLevel(this.getLevel() + 1); }, off: function() { this.element.css({ background: "none"}); this.destroy(); // use the predefined function } }; $.widget("ui.green3", Green3); // create the widget (the error occurs at this line) $.ui.green3.getter = "getLevel"; I'm using: *Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.6) Gecko/2009020911 Ubuntu/8.04 (hardy) Firefox/3.0.6* Sorry if this turns out to be a simple typo error. I find it quite hard to debug JavaScript code. Hope you may be able to help me. Thanks in advance. -- Warm regards, Reggie --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery-ui@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 -~----------~----~----~----~------~----~------~--~---
