Issue: TypeError: $.widget is not a function

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:
<a href="http://youngisrael-stl.org/wordpress/understanding-jquery-ui-widgets-a-tutorial/">http://youngisrael-stl.org/wordpress/understanding-jquery-ui-widgets-a-tutorial/</a>
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" "<a href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>"> 
<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> 
 This is a paragraph called with .green4({ level:3, 
 greenlevels: ['#000', '#00f', '#088', '#0f0', '#880', '#f00', '#808', '#fff'] 
 }). 
 <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

Topic Participants
reggieniccolo.santos
Richard Worth

Issue: TypeError: $.widget is not a function

Issue: TypeError: $.widget is not a function

Topic Participants

reggieniccolo.santos

Richard Worth