I was successfully using some plugin for about 6 months on my website and all of a sudden I started getting this message for one of my scripts: "$ is undefined".

This is the problematic line of code: $.widget("ui.ImageColorPicker", uiImageColorPicker);

I'm using this plugin and almost the newest jQuery with noConflict enabled: I didn't change anything for 6 months (I didn't update jQuery). I'm sure it worked fine just 2 weeks ago and now it's broken all of a sudden.

EDIT: Error is gone. I'm removing example website.

I was successfully using some plugin for about 6 months on my website and all of a sudden I started getting this message for one of my scripts: "$ is undefined".

This is the problematic line of code: $.widget("ui.ImageColorPicker", uiImageColorPicker);

I'm using this plugin and almost the newest jQuery with noConflict enabled: http://github./Skarabaeus/ImageColorPicker I didn't change anything for 6 months (I didn't update jQuery). I'm sure it worked fine just 2 weeks ago and now it's broken all of a sudden.

EDIT: Error is gone. I'm removing example website.

• javascript
• jquery

Share Improve this question Follow edited May 31, 2012 at 12:04 Atadj asked May 31, 2012 at 11:10 AtadjAtadj 7,2102121 gold badges7272 silver badges9494 bronze badges 14

• Of course, jQuery is included and the script works partially. Actually only "click" event from that script stopped working. – Atadj Commented May 31, 2012 at 11:15
• Is that the only error in the console? – Rune FS Commented May 31, 2012 at 11:17
• In order to use jQuery.widget, you may need to include a jQuery plugin - perhaps jQuery UI? – Brilliand Commented May 31, 2012 at 11:23
• 1 You had 2 problems: first was solved by @beeglebug's answer, and second is that you load jQueryUI and jQuery.ImageColorPicker in parallel, and sometimes you end up trying to initialize colorpicker before you have jQueryUI (which ColorPicker depends on) – MBO Commented May 31, 2012 at 11:48
• 1 To test it, open Net tab in Chrome Inspector or Firefox, reload page and check loading bars of your scripts. – MBO Commented May 31, 2012 at 11:50

 |  Show 9 more ments

5 Answers 5

Sorted by: Reset to default 5

It looks like a variable scope issue.

Try changing the first line to this:

(function($){

and the last line to this:

})(jQuery);

By doing this we are passing in the jQuery object to the anonymous function which surrounds the plugin, but by referencing it as $ the code within the block can be written using 'normal' jQuery, while still maintaining the noConflict mode on the rest of the page.

Please try this

<script type="text/javascript" src="other_lib.js"></script> //In your case try Imagecolorpicker js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

Reference $.noConflict();

It looks like jQuery.Widget is defined on that page. Try that instead of $.widget.

First, make sure you included jQuery UI. try to use jQuery.widget. If that doesn't work, use:

e = jQuery; // you can use anything else than $

Now, you should type e.widget("ui.ImageColorPicker", uiImageColorPicker); instead of what you have.

Try to use the explicit jQuery object instead of it's $ alias.
For instance:

jQuery.widget("ui.ImageColorPicker", uiImageColorPicker);