js: Using some custom jQuery - javascript

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

Related

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 - "$ symbol is undefined"

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

jQuery Grails Plugin

I'm trying to install the jQuery plugin for Grails. Now I have a path and an include but it's pointing to js/jquery/jquery-1.4.3.js. I would like to change this. Following the documentation I should add
jquery {
sources = ''
version = '1.4.4'
}
To my Config.groovy file. Having done this I see no change. What is the correct way to change the include or do I need to simply move and rename the file?
ref: http://www.grails.org/plugin/jquery
Add to config.groovy
jquery {
sources = 'jquery' // Holds the value where to store jQuery-js files /web-app/js/
version = '1.4.4' // The jQuery version in use
}
Then
grails clean
grails run-app
It work for me
You can also download Jquery from it's site and then put it in your web-app/js.
Next simply include it on top of your page or in your layout.gsp with something like..
<script type="text/javascript" src="${resource(dir: 'js', file: 'jQuery-144.js')}"></script>
That's all there is to start using jQuery.
Hope it helps..

Multiple jQuery.noConflict() instances

I am working with several jQuery scripts that include a MenuFader (http://css-tricks.com/examples/MenuFader/), twitter feed, and timestamp. Additionally I have a couple Mootools scripts that include the Barackslideshow (http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html). And finally I have a scrolling ticker with tooltips taken from the twitter homepage.
I originally had a conflict with the Jquery MenuFader and Mootools BarackSlideshow, but easily fixed this issue with the jQuery.noconflict(); and replaced all corresponding $ with jQuery.
Unfortunately, after I added the scrolling ticker from Twitter, the Mootools BarackSlideshow and the Jquery MenuFader no longer work.
I tried to implement jQuery.noconflict(); then $.noconflict(); then var j = jQuery.noconflict(); and replacing the $ as I did previously, but I cannot get the scripts to play nicely.
Any help is greatly appreciated...I have been working on this all day. I am pretty new with javascript, but have managed to get through most problems with a little persistence. Please take a look at the script below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script src="http://a2.twimg.com/a/1274914417/javascripts/fronts.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$( function () {
setTimeout(function() { $(".twtr-widget").append($("<div></div>").attr("class", "twtr-fade")); }, 0);
(function() {
var tabIndex = $("[tabindex]:last").attr("tabIndex");
var setTabIndex = function() {
$(this).attr("tabindex", ++tabIndex);
}
$(".footer-nav a").each(setTabIndex);
$(".language-select a").each(setTabIndex);
})();
$("#signup_submit").scribe({
event_name: "signup_submit_click",
experiment: "ab_signup_button",
bucket: "sign_up"
}, "www_ab_tests");
$('#signin_menu').isSigninMenu();
new FrontPage().init();
});
//]]>
noConflict is simply and only about changing the name the jQuery library is available under.
This is an attempt to play nicer with other frameworks that may also want to use the name $, but that's all it does. It does not solve any other kind of general conflict with other frameworks. For example when one framework clones, changes or removes an element with jQuery's internal ID markers, weird undebuggable errors may ensure. It is still a really bad idea to use more than one framework on a single page, when they're as wide-ranging and intrusive as jQuery. (Especially jQuery 1.3, which was super-promiscuous about what elements it touched.)
Similarly, two high-level plugins that operate on the same elements are very likely to have unwanted behavioural interactions. Say one plugin binds a behaviour to an element, but then the other plugin deletes that element to replace it with a progressive-enhanced version. Or one plugin tries to read the offsetWidth of an element that no longer has a visible width because another plugin has called hide() on its parent.
Scripts and plugins may pretend to be fully encapsulated behaviours that you can throw around without understanding how they work, but they really aren't. If you bind two scripts (that have not been deliberately designed to work together) to the same elements they are likely to interfere or fail. Try to keep elements that will be affected by different plugins apart from each other to reduce this potential.

Categories

Resources