jQuery - "$ symbol is undefined" - javascript

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.com/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.

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);

Related

js: Using some custom jQuery

I have a bit unusual case in my project. The jQuery is loaded under a namespace, like
var grp = {
"jQuery": jQuery.noConflict(true)
};
So in my custom scripts I am doing:
(function($){...}(grp.jQuery);
The question I have is how to handle external jQuery plugins. E.g. I want to add autocomplete plugin, which depends on jQuery, and starts with
$(document).ready(function() { ....
And it looks like the only option to include them in source code like
<script type="text/javascript" src="/static/autocomplete_light/django_admin.js"></script>
would be to edit them all, which is not practical...
You have two options:
Move jQuery to where the plugins expect to find it (i.e. to a global)
Edit all the plugins to tell them where jQuery actually is
You could try writing a preprocessor that edits all the plugins for you at build time (this would probably be more work and more error prone than is worthwhile).
Assuming you are not using the $ variable name anywhere else,
maybe you can append it to the window on startup so it'll be available.
Something like:
(function(jQuery) {
window.$ = jQuery;
}(grp.jQuery))

Why can't I use a <script> tag for jQuery anywhere?

This is an issue of scope I believe. I wish to use jQuery in a Joomla module and include the code within a tags in the php source. This works:
<script> alert("foo"); </script>
but this doesn't:
<script> alert($.jquery); alert(jQuery.jquery); </script>
which should produce at least 1 alert box with the jQuery version, but the alert says "undefined". The webpage <head> section already includes jQuery, and it is used in the html stream before the above <script>. I don't believe the <script> block defines a new, independent script scope / context, but that is how it behaves.
Add .fn.:
alert(jQuery.fn.jquery);
// or
alert($.fn.jquery);
Or try using jQuery as a function:
alert(jQuery().jquery);
// or short:
alert($().jquery);
Michael pointed out another one:
alert(jQuery.prototype.jquery);
// so we can also add
alert($.prototype.jquery);
If you want your code to work:
// add somewhere before:
jQuery.extend(jQuery, {jquery: jQuery.fn.jquery});
// Than this should work just fine:
alert(jQuery.jquery);
alert($.jquery);
Extend JQuery object ($ or jQuery) by .jquery equal to jQuery.fn.jquery.
As you can see we can add any properity to jQuery. Let's do jQuery.version:
$.extend($,{version:$().jquery});
If you want version you need
jQuery.fn.jquery
You can do
jQuery.fn.jquery
You can also do
jQuery.prototype.jquery

Can I use something other than $ to prevent conflict between jQuery plugins?

I have two plugins, both which use their own .swipe() function: ex: $("div").swipe();
Is it possible to give one of the plugins a different variable instead of $?
For example, could I use jQ("div").swipe(); for plugin A and $("div").swipe(); for plugin B?
Yes, however it would be better to instead rename the plugin.
<script src="jquery.swipe.js"></script>
<script>
$.fn.swipeOne = $.fn.swipe;
</script>
<script src="jQuery.swipeTwo.js"></script>
<script>
$(document).ready(function(){
$("#swipeone").swipeOne();
$("#swipetwo").swipe();
});
</script>
Otherwise you would have to include jQuery twice.
Yes, you want the noConflict option.
http://api.jquery.com/jQuery.noConflict/
Better example of how to use it:
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
If both jQuery plugins need to be bound to the same jQuery object, go in either one plugin, and look for $.fn.swipe. Change the word "swipe" to anything you like (e.g. $.fn.mySwipe), bearing in mind that its internal references to the word "swipe" might also need to change.
You can change the $ by using
var $j = jQuery.noConflict();
Now you'd use $j whenver you'd use $ before, e.g.,
$j(document).ready(function() {
//stuff
}
you can use
jq(function) {
})
and then just refer to jq

jQuery plugin conflicting with other basic show/hide functions

I bought (didn't code myself due to lack of education blah, blah, blah) a jQuery image slider/navigation plug in. it works fine, and I have adjusted the images and CSS fittingly.
Problem is that when the slider is working properly, I cannot use a show/hide onClick event such as $('#someId').toggle();.
Using trial and error I have found that commenting a few lines of js on the html page allows the show/hide functions to work, but then the slider is broken,.
The js that I comment out comes after the slider images(plug-in).
The JS code in questin is:
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx('.slidedeck').slidedeck();
</script>
When comment it out with html, then I can use onclick="$('#someId').toggle();" without a problem. But again, then the slider plugin is very broken and splattered all over the page.
As it is noticeable, and stated, I know nearly nothing.
Can anyone help me understand when this is happening?
Thanks
/Brian
try change:
<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx('.slidedeck').slidedeck();
</script>
to:
<script type="text/javascript">
$('.slidedeck').slidedeck();
</script>
http://api.jquery.com/jQuery.noConflict/
you have to use $jx or jQuery
ex: onclick="jQuery('#someId').toggle();"
The dollar sign is an alias for the jQuery method. Because there are other JavaScript libraries that may use the dollar sign as well, jQuery offers the noConflict method which basically renames the jQuery method to the variable that you set it to. (This way, it won't conflict with those other libraries.)
So, after the noConflict is called, all of your jQuery calls will need to replace the dollar sign with that variable. So in your example, just do this:
onclick="$jx('#someid').toggle();"

print the first link in the document

I would like to print the first link in the page with JavaScript. But when I use the following code, it doesn't work:
<html>
<head><title></title></head>
<body>
<a id="mylink" href="http://google.com">Google</a><br />
<script>
a=$('mylink').href;
document.write(document.links[0]);
</script>
</body>
</html>
Then I commented out the code "a=$('mylink').href", it suddenly worked, why? How come the varable a has any influence on the next statement?
Any answers are appreciated.
There's a few possibilities:
The object $ is not defined and caused a JavaScript error preventing your 2nd statement to execute
The $ object does not know what to do with the string passed in and errors
The returned value from $ does not have a value (ie - it returns undefined) which wont have a property href, causing a JavaScript error
the code is not working because in your example the $ object does not exist and will cause an error. It seems that you were trying to use a JavaScript framework like jQuery ($ object) but you forgot to include it.
Try to add the following script-Tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
If you wanted to use jQuery, you should also access attributes via the .attr("attrname") function. E.g.
var a = $('#mylink').attr('href');
Again if you wanted to use jQuery, you have to alter the selector from "mylink" to "#mylink" to specify that you were searching for the element with the id "mylink".
I am a bit confused as to what you are trying to do, but couldn't you just write the whole link in js? Ex:
<script>
<!--
document.write('Google');
-->
</script>
<noscript>
Google
</noscript>
The comment tag in the script is ignored and is only there so browsers that don't support javacript won't print it in the document. The <noscript> is so browsers that don't support javascript have alternate content.
It doesn't work because a=$('mylink').href fails to execute and stop executing of following code. The code document.write(document.links[0]) is correct. When you call it without previous wrong line, it just works.
I think in the first line you're trying to use jQuery library. If you want to do it, you need to include jQuery library using <script> tag, then use the following code:
document.write($('a:first').attr("href"));
Just remove the jQuery stuff, you don't need it. As you've already discovered, there is a document.links collection so if you want to print the herf value of the first link in the document:
document.write(document.links[0].href)
and you're done.

Categories

Resources